Many of the sites that you access today incorporate a variety of buttons within its page content. These buttons might be associated with a form, a link, or some other site interaction. Buttons are nothing new but they’ve come along way since the early days of the world wide web. Buttons are a great way to attract the user to click further into your site. Let’s take a look at how you can build beautiful buttons with a few lines of CSS.
Button Basics
For today’s post I’d like to focus on anchor-style buttons <a>. To start off, let’s build our sample link:
<a href=”/blog”>Read our blog ›</a>
Now, let’s add our CSS classes. I like to include multiple classes into my stylesheet to help customize my buttons. Here are the basic building blocks that I use.
.btn {
display: inline-block;
text-align: center;
padding: 8px 20px;
text-decoration: none;
}
.btn-block{display:block;}
/* Button color */
.btn-blue{background:#2d8bca;}
.btn-blue:hover{background:#3a9ef2;}
Here’s what the button looks like with these classes applied:
<a class=”btn btn-blue” href=”/blog”>Read our blog ›</a>
<a class=”btn btn-blue btn-block” href=”/blog”>Read our blog ›</a>
Notice something different? By changing the anchor into a block-level element, the content spans the full width of the defined space.
Additional CSS properties
These buttons are pretty basic. Let’s kick them up a notch. I’m going to apply font styling and text adjustments to our buttons using:
.btn {
font-family:'Montserrat', sans-serif; /* Google Font */
text-transform: uppercase;
font-size: 14px;
letter-spacing:1px;
font-weight: bold;
border-radius: 3px;
}
Now, let’s take a look at our button
Adding Additional Colors With Hover States
.btn-orange{background:#d35400;}
.btn-orange:hover{background:#EC670F;}
Advance Button Styling
Now that we’ve styled our buttons, let’s add some animation.
.btn{transition:all 0.3s ease 0s;}
.btn:hover{transform: translateY(-2px);}
.btn:hover{transform: scale(1.1);}
Clickable button
.btn{
box-shadow: 0 4px 0 #1C608E;
transition: all 0.1s linear;
}
.btn:active{
box-shadow: 0 2px 0 #1C608E;
transform: translateY(3px);
}
By adding these animation properties, we can create simple fade effects which add an extra level of refinement.