5 Easy Ways to Spice Up Your Buttons With CSS Transitions

By default, buttons are boring. There is not point in sugar coating it. But, if you add just a few lines of CC to animate the buttons a tad the button will breath new life.

I’m not talking about extreme fancy animations but simple CSS transitions like easing out the button’s background change on hover. Simple changes can go a long way in spicing up your whole interface. So, let’s see those five easy ways you can improve your buttons though CSS transitions.

Default CSS

Although I will go over each of the five transitions individually, I wanted to give you the default CSS that should apply to all of the buttons no matter what. This way, they will appear similar without me having to repeat the default styling all over in each example. Use the code below, and you’ll be ready to start.

[css]body {
background: #DAEBF0;
}
section {
width: 200px;
margin: 0 auto;
}
button {
display: block;
width: 200px;
height: 50px;
margin: 50px 0;
background: #3498db;
border: none;
color: #fff;
font-size: 14px;
font-weight: bold;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}[/css]

In the above code, I’m resetting the style of each button to be the same so that it’s easier to work with them. As you’ll shortly see, each button will be encased in a section. This makes the button appear in the middle of the page. The section nor the body styling above is crucial to the CSS transition I’m exploring within this tutorial.

Button 1: Background and Color Change

A button can be more interesting if on hover you change its background and text color. That’s nothing new as buttons have been changing the background on hover for a long time. However, when you add a transition, it smooths the background change effect making the interaction better by making it easier on the eyes.

HTML

[html]<section>
<button type="button" id="one">Submit</button>
</section>[/html]

The HTML is nothing special, just a button with an ID one within a section. The CSS is where the good stuff is.

CSS

[css]/* ONE */
button#one {
background: #3498db;
color: #fff;
-webkit-transition: background .5s ease, color .3s;
-moz-transition: background .5s ease, color .3s;
-ms-transition: background .5s ease, color .3s;
transition: background .5s ease, color .3s;
}
button#one:hover {
background: #2980b9;
color: #1b5377;
}[/css]

In the default CSS, we defined the background color of every button as #2980b9 which is the light blue you see in the images. We also defined the text color as white – #fff. In the CSS above, I’ve added those two properties just so you know exactly what is happening.

You can add the transitions to the individual properties and customize them a bit like I did above. Or you can consolidate into one line, which affects all transitions like all .5s ease. By changing the colors on hover and by adding the transitions to those properties the change will now ease in. It matters because now the interaction is smoother and it makes a difference for the users. Jarring changes are just not as pleasant as easing in.

5 Easy Ways to Spice Up Your Buttons With CSS Transitions 1

Button 2: Adding an Icon

This transition will include appearing an icon on hover. Having an icon within a button is a great idea; it’s another visual aid to help a user confirm what they are doing. Having the icon appear in the button on hover is just a fun effect.

HTML

In order to include an icon within the button, you’re going to need to link the Font Awesome library into your file. To do that copy the link below into your header and you’ll be set. You can learn more about Font Awesome on their own website.

[html]<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>

<section>
<button type="button" id="two"><span>Continue</span> <i class="fa fa-arrow-right"></i></button>
</section>[/html]

As you can also see the text of the button is a bit different than the previous example. The copy ‘continue’ is encased within a span. The i element that follows is how Font Awesome shows its icons. I’ve chosen a right arrow icon as you can tell by the class name.

CSS

[css]* TWO */
button#two span {
padding-left: 10px;
}
button#two i {
opacity: 0;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
button#two:hover i {
padding-left: 10px;
opacity: 1;
}[/css]

Within the CSS we are doing a few things. First, we are offsetting the ‘continue’ text by 10 pixels. In order to have the arrow transition in on hover, we cannot display: none, or visibility: hidden. Visibility nor display work with the CSS transition property so we have to use opacity. Opacity means that the element is there but it’s not visible. Therefore, in the default state the text ‘continue’ doesn’t look centered.

Next, add the transition to the icon by selecting the i element. I’ve added some left padding to the icon so that it moves a little bit when it appear on hover. It’s an additional design decision; I felt the icon looked better if it faded in by moving a bit too. See if you like it without that.

5 Easy Ways to Spice Up Your Buttons With CSS Transitions 2

Button 3: Adding Text to an Icon

This is by far the most complex of the five transitions. This example is the opposite of the last one where we are adding text to an icon. It’s a good idea to accompany icons with text so that a user is never unsure of what the icon could mean.

HTML

In order to include an icon within the button, you’re going to need to link the Font Awesome library into your file. To do that copy the link below into your header and you’ll be set. You can learn more about Font Awesome on their own website.

[html]<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>

<section>
<button type="button" id="three"><i class="fa fa-times"></i> <span>Exi t</span></button>
</section>[/html]

Once again we need to add the Font Awesome library into the header. If you look at the button the text is also wrapped in a span but the text now comes after the icon.

CSS

[css]/* THREE */
button#three {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;

width: 100px;
padding-left: 35px;
}

button#three span {
opacity: 0;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
}

button#three:hover span {
opacity: 1;
}
button#three:hover {
width: 200px;
padding-left: 0;
}[/css]

Within the CSS the button first is resized to be smaller. The X icon needs to be centered so padding is added to its left side. The span is still there but it’s invisible because it uses the opacity property to appear on hover.

In addition to changing the opacity of the span, the width of the button needs to be changed on hover as well. That’s why there are two separate transitions here, one regarding the button’s width and one regarding the span’s opacity.

5 Easy Ways to Spice Up Your Buttons With CSS Transitions 3

Button 4: Increasing Button Width

Here we have another simple transition. In order to highlight a button, you can just expand it a little. It will draw attention to it to, this will let a user know for sure they hovered an active button.

HTML

[html]<section>
<button type="button" id="four">Submit</button>
</section>[/html]

The HTML for this example is pretty skimpy; it’s just a button with an ID four, exactly like the first example.

CSS

[css]/* FOUR */
button#four {
width: 175px;
background: #3498db;
margin:0 auto;

-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
button#four:hover {
width: 200px;
background: #2980b9;
}[/css]

By default, the button needs to be a little smaller so it’s width was set to 175px. However, on hover it’s width will grow to 200px. The button should expand left and right thanks to the properties of the section we set earlier on. To give the button a little bit more personality, I’ve also included a slight background change, in addition, the width increase.

5 Easy Ways to Spice Up Your Buttons With CSS Transitions 4

Button 5: Substitute Background with Border

This last transition is pretty cool. It may feel dramatic, as the color change is different. Basically, we are taking the background and making it disappear so the button only has an outline, the border.

HTML

[html]<section>
<button type="button" id="five">Submit</button>
</section>[/html]

Once more, the HTML is only the button with an ID five.

CSS

[css]/* FIVE */
button#five{
background: #3498db;
border: 2px solid #3498db;

-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}

button#five:hover{
background: none;
color: #3498db;
}[/css]

The CSS for this example is nothing scary. First, you should add the border to the default button state so that the change is not jarring. It may look awkward to add a border when you are removing the background. This can be solved if the border is already there and is the same color as the background so it doesn’t actually look like there is a border in the first palace.

Next, you simply state that there is no background on hover; set the background to be none. In the CSS above, I’ve also changed the text color to be the same as the border because the white text wouldn’t be visible on the light background of the page.

5 Easy Ways to Spice Up Your Buttons With CSS Transitions 5

Conclusion

Buttons don’t need to be overly complex. Simple and minimal adjustments can make them stand out and shine.

Paula Borowska
Paula Borowska
Articles: 27