Styling links as buttons

Buttons are glorified links. Here are some pointers to style a link to create a button look:

• apply the styling directly on the link (<a> tag) rather than the containing div (or p tag)
• use padding to adjust the size of button so space around text is evenly distributed
• as a general rule, right/left padding is larger (~2x) compared to top/bottom padding
• use a background color that brings attention to the button
• a slight bit larger font size
• use :hover pseudo-selector to enhance interactivity

Unstyled link

Styled link

.btn {
    text-decoration: none;
    background: #fbd46d;
    color: #222831;
    font-weight: 800;
    font-size: 1.2rem;
    padding: 0.8em 1.6em;
    border-radius: 2em;
    font-family: arial, sans-serif;
}

.btn:hover {
    background: #eebb4d;
}

Fancy!