Design

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

By June 14, 2016 No Comments

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.

Executive's Guide to Web Development

80 pages of topics and tips to navigate your way to a better website.

Leave a Reply