Stylish Glowing Button

Anoop Kr Sharma

4.73/5 (7 votes)

Jul 11, 2013

CPOL

1 min read

35653

548

Stylish glowing button that catches everyone's eyes.

Download glowingbuttonexample.zip - 661 B

Creating a Stylish Glowing Button

All of us have seen different types of buttons in different websites. But Today the Button we are going to create is Special.

Step 1: Creating a HTML Document

<body>
<a class="large green button" href="#">Look at me!</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<a class="large blue button" href="#">Click me!</a>
</body>

We are going to create two button.

Step 2: Creating CSS Document

body 
{
background-color:gray;
}
.large
{
color:white;
padding:10px 15px 10px 15px;
border-radius:10px;
text-decoration:none;
font-weight:bold;
}

Here We set background color of body to gray and for .large class we set font color,padding,border radius etc.

Preview:

CSS

@-webkit-keyframes greenPulse
{
from{background-color: #749a02;-webkit-box-shadow: 0 0 9px 
#333; }
50%{background-color: #91bd09;-webkit-box-shadow: 0 0 18px 
#91bd09; }
to{background-color: #749a02;-webkit-box-shadow: 0 0 9px 
#333;}
}
@-webkit-keyframes bluePulse 
{
from { background-color: #007d9a; -webkit-box-shadow: 0 0 9px 
#333; }
50% { background-color: #2daebf; -webkit-box-shadow: 0 0 18px 
#2daebf; }
to { background-color: #007d9a; -webkit-box-shadow: 0 0 9px 
#333; }
}

We are going to add animation in our button's by using CSS3.

To create animations in CSS3, We will have to use the @keyframes rule.

The @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.

Inside Keyframe we have given the background-color and box-shadow color changing from 0%(from) to 50% and 50% to 100%(to).

CSS

 .green.button 
{
-webkit-animation-name: greenPulse; 
-webkit-animation-duration: 3s; 
-webkit-animation-iteration-count: infinite;
}
.blue.button
{
-webkit-animation-name: bluePulse;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
}

Here we are applying our animation (@keyframe), animation duration and animation iteration (specifies the number of times an animation is played) to our buttons.

I have set green button animation duration to 3s and blue button animation duration to 4s.

Preview:

CSS

a.button:active
{
position:relative;
top:1px;
}
a.button:hover
{
mouse:pointer;
}

Finally we set here :active position from top to 1px, so that on clicking the button, it move slightly from its position and on :hover mouse appear as pointer.

That's all.

Hope you like it. Thank you.