Pure CSS Buttons with Hover effect and Active Pseudo-element

You may remember the days when we used to lookout for custom image buttons. And for getting the hover and active states, we used to deploy JavaScript codes to change the image on hover and click. But there were issues of loading of three images for each state. Unless the images are loaded, the image used to disappear on mouse hover and click.

Well, the days are gone with CSS3 introduction. Most of the websites coming out these days are using the cool buttons created purely with CSS. Imageless CSS buttons take very less time to load compared to image buttons and are really easy to customize.

Today, we will learn to create some cool CSS buttons with hover effect and active pseudo elements. So, there are three stages for all these buttons – normal, on mouse over and on mouse click. And as we are using some CSS3 properties like box-shadow, gradient and border-radius; it is better to try these with modern browsers. Older browsers like IE8 and below do not support these properties and here you will miss these effects. However, the accessibility will not get affected and these will degrade nicely.

So, before we get into the details and know how, just have a look what we will create in this tutorial.

CSS Buttons Demo

And as per the practice, you will find all the files available for download at the end of this tutorial. You can straight-away download these cool CSS buttons and use it in your projects.

css-hover-butons

HTML Codes

The HTML codes for the buttons are pretty simple and straight-forward. You just have to define the CSS class for <a> or <button> elements. Here, we are creating four different buttons with four anchors.

<a>Simple Button</a>
<a class="common push-down">Push Me</a>
<a class="common cool">Cool Blue</a>
<a class="common indent">Fancy Indent</a>

In all these buttons, you will find one common class i.e. “common” and one more class which will be used for defining the different styles. These buttons have been placed inside a container which is used for center aligning. That’s it!

Common CSS Code

Let’s first have a look at the CSS code for the “common” class. This is the base class for all the buttons meaning that these codes will be applicable for all the buttons in this tutorial. Wherever required, we can override the properties by defining it again with the specific button class.

.common
{
padding: 10px 15px;
border-radius: 5px;
font-size: 16px;
text-align: center;
position: relative;
display: inline-table;
cursor: pointer;
transition: all .1s ease;
}

For the common class, we are first defining the padding as 10px and 15px in horizontal and vertical directions. After that we are defining the border radius of 5px.

Important here is the cursor property which is set as “pointer” and the transition property where we are defining the delay of 0.1 second for smooth transition on hover and click.

One thing worth mentioning here is that for simplicity, I have removed the vendor prefixes. But for better compatibility with browsers, these are always recommended. You will find the vendor prefixes in the CSS file available for download.

So, let’s start by creating the simplest in the lot.

Simple Button

For every button, as discussed earlier, you will find the CSS codes for three states – normal, hover and active.

.simple
{
border: 1px solid #999999;
box-shadow: inset 0 0 1px 1px #F6F6F6;
background-color: #E0E0E0;
color: #333333;
}

.simple:hover
{
Background-color: #CCCCCC;
color: #404040;
}
.simple:active
{
Background-color: #999999;
color: #000000;
}

As you will see, for normal state, we are defining the border, inset box shadow, background color and font color. For hover and active pseudo classes we are just changing the “background-color” and “color” properties to make them a little darker. Nothing very special, just plain and simple! If you are not comfortable with shadows, you can go through my tutorial on CSS box shadow property.

Push Me Button

Now, this is not that simple, it’s funky one.

As you take your pointer, you will notice a nice hover effect which is possible by inset shadow variation. Once you click on it, it will be pushed down. The pushing down effect is achieved through the box-shadow properties change. Initially, the shadows are spread and blurred which reduce once you click on the button.

.push-down
{
border: 1px solid #38538c;
background-color: #4162a8;
color: #FFFFFF;
text-shadow: 0px -1px 1px #213052;
box-shadow: inset 0 1px 10px 1px #5D88E3, 0px 1px 0 #1C2C4D, 0 6px 0px #1D3054, 0px 10px 25px rgba(0,0,0,.7);
}
.push-down:hover
{
box-shadow: inset 0 0px 20px 1px #88ADFC, 0px 1px 0 #1C2C4D, 0 6px 0px #1D3054, 0px 10px 25px rgba(0,0,0,.7);
}
.push-down:active
{
box-shadow: inset 0 1px 10px 1px #5B89EB, 0 1px 0 #1A2847, 0 2px 0 #1C2D4D, 0px 3px 6px rgba(0,0,0,.9);
margin-top: 10px;
}

There are three shadows defined with the box-shadow property – one inset and other two drop shadows. On hover, the drop shadows remains same while the inset shadow changes to lighter color. On click both inset and drop shadows changes.

To get the 3D push down effect, we are defining the margin-top property to 10px. This takes the button down by 10px. This along with 0.1 second transition delay and text-shadow creates the nice push down effect. If you wish to play around with box-shadows, try box shadow generator.

Cool Blue Button

The next two buttons uses CSS gradient properties. The cool blue button comes out on hover and pushed down just as “push me” button on click.

.cool
{
background-color: rgb(183,222,237);
background: linear-gradient(to bottom, rgba(183,222,237,1) 0%,rgba(113,206,239,1) 50%,rgba(33,180,226,1) 51%,rgba(183,222,237,1) 100%);
box-shadow: 0px 8px 5px -5px #6B6B6B;
color: #ffffff;
}
.cool:hover
{
box-shadow: 0px 8px 6px -3px #6B6B6B;
}
.cool:active
{
margin-top: 5px;
box-shadow: 0px 7px 2px -6px #6B6B6B;
color: #0D495E;
}

We are first defining the background-color which is applied if CSS gradient property is unsupported. It will help the CSS3 button to degrade nicely on older browsers.

Now, we are creating the sleek looking button with the CSS gradient. If you wish to experiment more, try Gradient Generator by ColorZilla. The gradients in the two examples have been created with this CSS gradient generator.

On hover, we are just blurring the box-shadow to give a come-up effect to the button. Here we are changing the font-color property for active pseudo element apart from defining the top margin as 5px.

Fancy Indent Button

Well, apart from hover and active, we are using one more pseudo element here – “before”. This is used to draw a box around the button which creates the indent effect.

.indent
{
border: 1px solid #C78166;
background-color: #8c3310;
background: linear-gradient(to bottom, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%);
box-shadow: inset 0px 0px 2px #E0E0E0;
color: #FFFFFF;
}

.indent:active
{
background: linear-gradient(to bottom, rgba(140,51,16,1) 1%,rgba(191,110,78,1) 100%); }
.indent:before
{
background-color: #EFF0F1;
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
padding: 8px;
left: -8px;
top: -8px;
z-index: -1;
border-radius: 5px;
box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
}
.indent:hover:before
{
background-color: #F2DFD7;
}

For indent and indent:active; we are using CSS gradients as in the previous example. In addition to that, we are defining the “before” pseudo class. For using “before” and “after” pseudo classes; the “position” property of parent element must be defined as “relative”. First we are setting the width and height both equal to 100% of the parent block.  Then along with padding of 8px, we are defining the position as absolute and left and top properties as -8px each for creating a shape around the button with 8px gap everywhere. Lastly we define the inset box shadow to create Indent effect.

But where is the hover effect? Well, on indent mouse hover; we are changing the background color of before pseudo class. This fills a nice color around the button on hover.

Conclusion

These were the four pure CSS buttons with hover and active pseudo elements. As you have seen, with just a few lines of CSS, you can create simple and elegant buttons. So, be creative and try creating some more buttons based on these examples.

And here are the files put in a Zip folder for download.

Download CSS buttons with hover effect and active pseudo element

 

Happy learning and designing!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>