After image hover effects in my last post I’ll show you some css button hover effects this time. As last time feel free to steal them right now.

CSS Button Hover Tutorial

If you have read my last post you already know how this stuff works. Here is a short reminder.

To add a hover effect to an element you need the :hover selector. You add it to your element in your cascading style sheet (styles.css in WordPress). An introduction to CSS can be found in this post. This is a typical css button hover effect:

.button:hover {
/* all your hover styles go in here */
}

Define every change on hover for this element inside. Additionally you can smooth out the transition between the states (non-hover to hover and vice versa). Simply add following code to your image element (more on transitions can be found here):

.button {
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

If you want to be 100% sure your effects work even in older browser versions you can add following code:

-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;

All” declares that this transition is used for all property state changes.

Five Simple To Epic CSS Button Hover Effects

Feel free to use these effects right now on your own website. Or experiment a little and create your own unique button hover styles in css. Effects go from simple to more complex. To create a button simply put an html link into place:

<a class="mybutton" href="#link">My Button Text</a>

The styles I used for this tutorial:

position: relative;
border-color: #1982C4;
background-color: #1982C4;
color: #fff;
padding: 0.3em 1em;
border: 2px solid;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 20px;
font-weight: 500;
line-height: 1.7em !important;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;

CSS Button Hover Effect 1 (Simple)

A simple background color change button.

Hover Me

.mybutton:hover{
border-color: #8AC926;
background-color: #8AC926;
}

CSS Button Hover Effect 2 (Cool)

A glow effect for your button. Use the hexcolortool to correctly lighten your color.

Hover Me

.mybutton:hover{
background-color: #339CDE;
border-color: #339CDE;
-webkit-box-shadow: 0px 0px 50px 0px rgba(76, 181, 247, 1);
box-shadow: 0px 0px 50px 0px rgba(76, 181, 247, 1);
}

CSS Button Hover Effect 3 (Pretty)

Play with letter-spacing and border-radius.

Hover Me

.mybutton:hover{
background-color: #339CDE;
border-color: #339CDE;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius:25px;
letter-spacing:5px;
}

CSS Button Hover Effect 4 (Amazing)

Use :before and :after selectors to create an outstanding button.

Hover Me

.mybutton{
background:none;
color: #1982C4;
border: 1px solid #1982C4;
}
.mybutton:hover{
color: #fff;
}
.mybutton:before{
width: 101%;
height: 0;
top: 0;
left: 0;
background: #1982C4;
content: "";
position: absolute;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.mybutton:hover:before, .mybutton:active:before {
height:100%;
}
.mybutton:after {
width: 100%;
top: 0;
left: 45%;
opacity: 0;
background:none;
font-family: 'FontAwesome';
content: "\f164";
position: absolute;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.mybutton:hover:after, .mybutton:active:after {
opacity:1;
}

CSS Button Hover Effect 5 (Epic)

Tricky and with Wow Factor.

Hover Me

.mybutton{
color: #1982C4;
background-color: #fff;
border-color: #1982C4;
}
.mybutton:hover{
-webkit-box-shadow: 0px 0px 30px 0px rgba(76, 181, 247, 1);
box-shadow: 0px 0px 30px 0px rgba(76, 181, 247, 1);
}
.mybutton:before{
top: 0;
left: 0;
position: absolute;
width: 45px;
height: 2px;
background: #4CB5F7;
content: '';
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.mybutton:hover:before{
opacity: 1;
left: 50%;
-webkit-transform: rotate(0deg) translateX(-50%);
transform: rotate(0deg) translateX(-50%);
}
.mybutton:after{
right: 0;
bottom: 0;
position: absolute;
width: 45px;
height: 2px;
background: #4CB5F7;
content: '';
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.mybutton:hover:after{
opacity: 1;
right: 50%;
-webkit-transform: rotate(0deg) translateX(50%);
transform: rotate(0deg) translateX(50%);
}

Use Them For Your Own Website

With a little time investment you can also create your own unique button styles. I’m sure they will catch your visitors’ eyes.

Cheers,
Arian