Home » Tutorials » HTML & CSS » CSS3 – Animated Button With CSS Transition

CSS3 – Animated Button With CSS Transition

CSS3 – Animated Button With CSS Transition

  • Stumble it!

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

My box with glow

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

<!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>

What you have to do is just create a button with class “box”, which we will style it in CSS later.

2. 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;
}

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:

-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> ]

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.


  • Jon

    In addition to transitions there are new things in CSS3 mainly animations. And to attract user attention there is nothing better then that.

    I have created a CSS3 Glowing Button featuring a button that has a radial glow on top of it; instead of outside. Providing a more subtile glow effects that attracts user attention to the button.

    • Hi Jon!

      Thanks for visiting onlyWebPro.com and as well as sharing the new technology CSS keyframe with all of the web designers here!

      Please stay in touch with us via either Facebook Fan Page, Twitter, China Weibo or even Google Plus!

      Regards,
      The Management of onlyWebPro.com

  • syed nadeem

    best site

  • xyz

    text-shadow: 0 0 5px #666, 0 0 10px #A5F1FF,

    0 0 20px #A5F1FF, 0 0 30px #A5F1FF,

    0 0 40px #A5F1FF;

    can you just explain me this code?? i am not in able to understand it..

Android, iOS Development Tutorials