4 Simple CSS Transitions to Enhance Your Buttons

Call to actions are one of the most important elements of a website, theme or template. When you think about it, almost every web page is designed with the goal of making the user take action.

So why not dress them up a little bit and add some simple CSS transition effects.

In this tutorial, I’ll go over 4 simple CSS transitions you can use to enhance your buttons and add a little flare to your web page.

Setting up the Code

Within your CSS file, you’re going to add the following CSS code to your button element.

body > button {
    background: #428BCA;
    color: #fff;
    font-family: Sans-serif;
    font-size: 20px;
    height: 60px;
    width: 150px;
    line-height: 60px;
    margin: 25px 25px;
    text-align: center;
    border: 0;
    transition: all 0.3s ease 0s;
}

The CSS properties above can be customized to your liking. You likely already have some default fonts and sizing set up especially if you’re using Bootstrap. Feel free to add, modify or subtract anything you want.

However, the CSS transition property must be included. It is comprised of 4 elements:

Property: Specifies the name or names of the CSS properties to which transitions should be applied.

Duration: Specifies the duration over which transitions should occur.

Timing: Specifies the timing function to be used for the transition.

Delay: Specifies how long to wait between the time a property is changed and the transition actually begins.

Applying the Transitions

Now that the groundwork is laid out, let’s proceed with 4 specific transitions that you can apply to your buttons.

You can view the full code for each example using the HTML and CSS tabs within the CodePen viewer.

Darken

To darken a button, simply set the background color to a darker shade when :hover is activated.

button:hover {
  background: #3071A9
}

See the Pen ksdmf by BootstrapBay (@bootstrapbay) on CodePen.

Fade Out

To fade out an element, first set opacity to 1 by default. Then, reduce the opacity to 0.75 when :hover is activated. Feel free to play around with the opacity setting.

 button {
  opacity: 1;
}

 button:hover {
  opacity: 0.75;
}

See the Pen pJyvq by BootstrapBay (@bootstrapbay) on CodePen.

Change Color

To transition the color of the button, select a different background color when :hover activated.

button:hover {
  background: #CF4647;
}

See the Pen kCyBG by BootstrapBay (@bootstrapbay) on CodePen.

Inset Border

To create an inset border, use the following CSS box-shadow properties. Feel free to increase or decrease the size of the box-shadow to your liking.

button:hover {
  box-shadow: inset 0 0 0 5px #3071A9;
}

See the Pen xzclm by BootstrapBay (@bootstrapbay) on CodePen.

Conclusion

You now have 4 simple CSS transitions at your disposal that you can use to dress up the buttons on your webpage. Go ahead and try them out!

If you have any other cool transitions you’d like to share, please leave us a comment below.

Sharing is caring!