We have learnt to create a button with glow effects purely in CSS in past tutorial. Today, we are going to apply some interactivity into the button.
The technology we are going to use is CSS Transition.
What is CSS Transition?
CSS Transition is part of the CSS3 specification that is still in draft form. It let us to animate changes to CSS properties. Because it still in draft form, so you have to specify different prefix for each browser.
Note: For Webkit “-webkit-transition”, for Opera “-o-transition”, for Gecko “-moz-transition”. Internet Explorer 6, 7, 8, 9 beta are not supporting this property.
Tutorial Details
- Difficulty: Beginner
- Technology: HTML4+, CSS3
- Supported Browser: Firefox (works in Firefox nightly builds), Chrome 5+, Safari 4+
Demo
Let’s start our tutorial! If you are not sure how to create the glow effect in CSS, please check out our previous tutorial “CSS3 – Glow Effects Without Photoshop“.
1. HTML
[xhtml]
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 – Glow Effects Without Photoshop</title>
</head>
<body>
<a class="box">My box with glow</a>
</body>
</html>
[/xhtml]
What you have to do is just create a button with class “box”, which we will style it in CSS later.
2. CSS
[css]
body {
background: #000;
}
.box {
background: #1c1c1c;
color: #0099ff;
display: block;
margin: 30px;
padding: 20px;
text-align: center;
width: 150px;
/*Transition*/
-webkit-transition: -webkit-box-shadow 0.5s ease-out;;
-moz-transition: -moz-box-shadow 0.5s ease-out;
-o-transition: box-shadow 0.5s ease-out;
}
.box:hover {
-moz-box-shadow: 0px 0px 15px #0099ff;
-webkit-box-shadow: 0px 0px 15px #0099ff;
box-shadow: 0px 0px 15px #0099ff;
}
[/css]
Change the body of document into black and use CSS shadow property as a glow for the button. Next, we use CSS3 “transition” property to animate the button. The explanation of the property:
[css]
-moz-transition: [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ]
-webkit-transition: [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ]
-o-transition: [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ]
[/css]
In this case, we set CSS3 shadow property for transition-property, 0.5 second for transition-duration and ease-out for transition-timing-function. That’s all you need to do in creating transition in CSS3. It’s simple right?
How about not supported browser?
You might need to find out alternative solution or write a JavaScript function for this problem. If you have a solution, please let us know! We appreciate your feedback! Kindly share your solutions at comment section or email it to myconnect@onlywebpro.com.