Click here to Skip to main content
11,701,904 members (63,987 online)
Click here to Skip to main content

Stylish Glowing Button

, 11 Jul 2013 CPOL 13.5K 429 5
Rate this:
Please Sign up or sign in to vote.
Stylish glowing button that catches everyone's eyes.

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:

image1

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.  

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Anoop Kr Sharma
Student
India India

You may also be interested in...

Comments and Discussions

 
QuestionStylish glowing button does not work in IE 8? Pin
Prince Antony G21-Feb-14 0:28
memberPrince Antony G21-Feb-14 0:28 
AnswerRe: Stylish glowing button does not work in IE 8? Pin
Anoop Kr Sharma23-Feb-14 16:31
professionalAnoop Kr Sharma23-Feb-14 16:31 
GeneralRe: Stylish glowing button does not work in IE 8? Pin
Prince Antony G25-Mar-14 20:06
memberPrince Antony G25-Mar-14 20:06 
QuestionMy vote of 4 Pin
kelx3921-Jul-13 23:24
memberkelx3921-Jul-13 23:24 
AnswerRe: My vote of 4 Pin
Anoop Kr Sharma22-Jul-13 6:31
professionalAnoop Kr Sharma22-Jul-13 6:31 
GeneralMy vote of 4 Pin
Luch Klooster13-Jul-13 23:57
memberLuch Klooster13-Jul-13 23:57 
GeneralRe: My vote of 4 Pin
Anoop Kr Sharma14-Jul-13 3:49
professionalAnoop Kr Sharma14-Jul-13 3:49 
GeneralMy vote of 5 Pin
Jayanta Chatterjee12-Jul-13 2:45
memberJayanta Chatterjee12-Jul-13 2:45 
GeneralRe: My vote of 5 Pin
Anoop Kr Sharma12-Jul-13 3:58
professionalAnoop Kr Sharma12-Jul-13 3:58 
GeneralMy vote of 4 Pin
Deenuji11-Jul-13 21:38
groupDeenuji11-Jul-13 21:38 
GeneralRe: My vote of 4 Pin
Anoop Kr Sharma12-Jul-13 3:55
professionalAnoop Kr Sharma12-Jul-13 3:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150819.1 | Last Updated 11 Jul 2013
Article Copyright 2013 by Anoop Kr Sharma
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid