CSS Button Tutorial: Simple Steps to Create Click-Worthy Buttons

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>

Read Our Blog ›

<a class=”btn btn-blue btn-block” href=”/blog”>Read our blog ›</a>

Read Our Blog ›

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

READ OUR BLOG ›

Adding Additional Colors With Hover States

.btn-orange{background:#d35400;}
.btn-orange:hover{background:#EC670F;}

 

READ OUR BLOG › CONTACT US ›

Advance Button Styling

Now that we’ve styled our buttons, let’s add some animation.

.btn{transition:all 0.3s ease 0s;}

 

READ OUR BLOG ›

.btn:hover{transform: translateY(-2px);}

 

READ OUR BLOG ›

.btn:hover{transform: scale(1.1);}

 

READ OUR BLOG ›

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);
}

 

READ OUR BLOG ›

By adding these animation properties, we can create simple fade effects which add an extra level of refinement.