With buttons playing a major part in the call to actions of your website it is important for them to make an impact on your visitors. This can be done in a number of different ways in this tutorial we are going to look at some of the things you can do with CSS3 to make your call to action buttons stand out. We are going to combine CSS box shadows, CSS border radius and CSS animation to create shiny buttons when the user scrolls over them. Here is an example of what we are going to create.
Please view the demo to see what we are going to create. Hover over the buttons to see the CSS animation effects.
Before we get started in creating this I need to say that some of these techniques won't work on older browsers as we are going to use lots of CSS3 features.
The HTML
To start off we are going to add the HTML to the page.
<a href="#" class="button green"><div class="light"></div>Click Here</a>
<a href="#" class="button red"><div class="light"></div>Click Here</a>
<a href="#" class="button blue"><div class="light"></div>Click Here</a>
<a href="#" class="button yellow"><div class="light"></div>Click Here</a>
<a href="#" class="button grey"><div class="light"></div>Click Here</a>
<a href="#" class="button black"><div class="light"></div>Click Here</a>
<a href="#" class="button brown"><div class="light"></div>Click Here</a>
<a href="#" class="button darkred"><div class="light"></div>Click Here</a>
<a href="#" class="button purple"><div class="light"></div>Click Here</a>
The things to note in the above HTML is the CSS classes used on the anchor tags. All of the buttons have a CSS class of button, this makes sure that they will all behaviour the same way. But to make them look different we are adding another class to change the colour of the button. Each of the buttons also have another DIV inside the anchor tag with a CSS class of light which will be the shine on the buttons, which we will investigate later in the tutorial.
The CSS Styling
The CSS is the main part of this tutorial and there is lots to it so we are going to split this section up into 3 parts, the looks, the box shadows on hover and active events and the shine animation. First the looks of the buttons, all of the buttons use the button CSS class which set the size of the buttons. The color of the background is done by the different color CSS.
Button CSS
.button{
height:2em;
padding:15px 50px;
margin:20px 40px;
cursor:pointer;
display:inline-block;
color:#FFF;
font-size:1em;
border:1px solid #eee;
background:#eee;
border-radius:4px;
line-height:2em;
border:1px solid #aaa;
text-decoration:none;
-webkit-transition: all 0.3s linear;
-khtml-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
As you can see above the CSS is quite basic setting the height and padding of the button. Within the button CSS class we are also adding the CSS transition property, this is used to fade in the box shadow on the hover event.
Button Colors
The following is the CSS background gradients used for all the buttons.
/***********************************************************************
* Green Background
**********************************************************************/
.green{
background: #cdeb8e; /* Old browsers */
background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* IE10+ */
background: linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 ); /* IE6-9 */
}
/***********************************************************************
* Red Background
**********************************************************************/
.red{
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* IE10+ */
background: linear-gradient(top, #ff3019 0%,#cf0404 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
}
/***********************************************************************
* Yellow Background
**********************************************************************/
.yellow{
background: #ffd65e; /* Old browsers */
background: -moz-linear-gradient(top, #ffd65e 0%, #febf04 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* IE10+ */
background: linear-gradient(top, #ffd65e 0%,#febf04 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */
}
/***********************************************************************
* Grey Background
**********************************************************************/
.grey{
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(left, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
background: linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 */
}
/***********************************************************************
* Black Background
**********************************************************************/
.black{
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
}
/***********************************************************************
* Brown Background
**********************************************************************/
.brown{
background: #f6e6b4; /* Old browsers */
background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#ed9017)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* IE10+ */
background: linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */
}
/***********************************************************************
* Blue Background
**********************************************************************/
.blue{
background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
}
/***********************************************************************
* Dark Red Background
**********************************************************************/
.darkred{
background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* IE10+ */
background: linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 ); /* IE6-9 */
}
/***********************************************************************
* Purple Background
**********************************************************************/
.purple{
background: rgb(203,96,179); /* Old browsers */
background: -moz-linear-gradient(left, rgba(203,96,179,1) 0%, rgba(173,18,131,1) 50%, rgba(222,71,172,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(203,96,179,1)), color-stop(50%,rgba(173,18,131,1)), color-stop(100%,rgba(222,71,172,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* IE10+ */
background: linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#de47ac',GradientType=1 ); /* IE6-9 */
}
The Button Hover Event
On the hover event of the button we are going to add a box shadow to make the button appear it is popping out. To add the box shadow use the following CSS.
.button:hover{
-webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-o-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}
The Button Active Event
The button active event happens when the user clicks on the button we need the button to change the box shadows so that we know when the button is clicked. Add the following to your CSS file.
.button:active {
-webkit-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
-khtml-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
-moz-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
-o-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
text-shadow:1px 1px 1px #eee;
}
CSS Shine
This part of the tutorial is looking at the animated shine on the button, this will appear on the button and a will spin from the left of the button to the right. To create this we are using CSS animation to add an event which changes the shine DIV at different keyframes. To start we need to make the div look like a shine of light, for this we are going to use a CSS background gradient which starts bright in the middle and fades out towards the edge of the div.
.light {
display: block;
position: relative;
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.9)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
padding: 1px 9px;
top: -16px;
left: -53px;
height: 0px;
}
This will place a shine at the top of your button, so now we can add the animation to the light DIV on the hover event of the button.
.button:hover .light{
padding:1px 5px;
-webkit-animation-name: shine;
-webkit-animation-duration: 0.6s;
-webkit-animation-timing-function: linear;
-khtml-animation-name: shine;
-khtml-animation-duration: 0.6s;
-khtml-animation-timing-function: linear;
-moz-animation-name: shine;
-moz-animation-duration: 0.6s;
-moz-animation-timing-function: linear;
-o-animation-name: shine;
-o-animation-duration: 0.6s;
-o-animation-timing-function: linear;
-webkit-animation-name: shine;
-webkit-animation-duration: 0.6s;
-webkit-animation-timing-function: linear;
left:45px;
}
@-webkit-keyframes shine {
0% { top: -15px; left: -48px; }
10% { top: -5px; }
20% { top: 5px; }
30% { top: 15px; }
40% { top: 25px; }
50% { top: 35px; }
60% { top: 25px; }
70% { top: 15px; }
80% { top: 5px; }
90% { top: -5px; }
100% { top:-15px; left:45px; -webkit-transform: rotate(-360deg); }
}
@-khtml-keyframes shine {
0% { top: -15px; left: -48px; }
10% { top: -5px; }
20% { top: 5px; }
30% { top: 15px; }
40% { top: 25px; }
50% { top: 35px; }
60% { top: 25px; }
70% { top: 15px; }
80% { top: 5px; }
90% { top: -5px; }
100% { top:-15px; left:45px; -khtml-transform: rotate(-360deg); }
}
@-moz-keyframes shine {
0% { top: -15px; left: -48px; }
10% { top: -5px; }
20% { top: 5px; }
30% { top: 15px; }
40% { top: 25px; }
50% { top: 35px; }
60% { top: 25px; }
70% { top: 15px; }
80% { top: 5px; }
90% { top: -5px; }
100% { top:-15px; left:45px; -moz-transform: rotate(-360deg); }
}
@-o-keyframes shine {
0% { top: -15px; left: -48px; }
10% { top: -5px; }
20% { top: 5px; }
30% { top: 15px; }
40% { top: 25px; }
50% { top: 35px; }
60% { top: 25px; }
70% { top: 15px; }
80% { top: 5px; }
90% { top: -5px; }
100% { top:-15px; left:45px; -o-transform: rotate(-360deg); }
}
@-keyframes shine {
0% { top: -15px; left: -48px; }
10% { top: -5px; }
20% { top: 5px; }
30% { top: 15px; }
40% { top: 25px; }
50% { top: 35px; }
60% { top: 25px; }
70% { top: 15px; }
80% { top: 5px; }
90% { top: -5px; }
100% { top:-15px; left:45px; transform: rotate(-360deg); }
}
That's all you need to create this effect.