How to Create Glowing Button in CSS3

April 18, 2012 // In: CSS, Web Design
Using CSS animation we are able to apply glowing animated effect on an ordinary buttons.
You can see in CSS how these come together. The CSS calls a pre-defined animation you create, assigns it a duration, and tells it how long to repeat.


@-webkit-keyframes orangePulse {
from { background-color: #d45500; -webkit-box-shadow: 0 0 9px #333; }
50% { background-color: #ff5c00; -webkit-box-shadow: 0 0 18px #ff5c00; }
to { background-color: #d45500; -webkit-box-shadow: 0 0 9px #333; }
.orange.button { -webkit-animation-name: orangePulse; -webkit-animation-duration: 3s; }
.button {
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
padding: 5px;
border: 0; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.5);
-webkit-border-radius: 6px; -moz-border-radius: 6px;
color: #fff;
cursor: pointer;

<input type="button" value="Send To Friend" class="large orange button" />

Upload, Resize and Save Image in jpg using PHP
Apply Watermark and Resize Image in PHP