Article Diary - General Knowledge Digest

Create Glowing, Radioactive Buttons with CSS

Create awesome looking and engaging buttons by using CSS animations to give them all that radioactive feel. Using CSS animations in Safari and Google Chrome, we’re able to turn an otherwise ordinary button into a glowing, radioactive mess of awesome. Don’t see the radioactive above? Be sure you’re in Safari or Chrome before getting underway.

Radioactive CSS Buttons

WOW! How do you do it?

For each button, we specify three things:
  1. Animation name (we’ll show this later)
  2. Animation duration
  3. And the number of times it repeats (iteration count)
You can see how these come together on the right. The CSS calls a pre-defined animation you create, assigns it a duration, and tells it how long to repeat. Pretty sweet, right? To make it work, we first specify all our button styles and then we added the shadows. Now, in the animation, we switch from a box-shadow that matches the background color to the color of the button to give it the glowing effect.

Requirements: Safari or Chrome Browser
License: License Free

Online Demo
Attached Files
There are no attachments for this article.
There are no comments for this article. Be the first to post a comment.
Security Code Security Code
Related Articles RSS Feed
Free Under Construction Coming Soon Template
Viewed 1898 times since Sat, Mar 12, 2011
Easy Slider jQuery Plugin - Easy Image or Content Slider
Viewed 1347 times since Tue, Jan 12, 2010
Google Web Toolkit - Version 2 Released
Viewed 1030 times since Tue, Dec 15, 2009
JavaScript Tree Menu Component - jsTree Menu
Viewed 1635 times since Sat, Jan 9, 2010
jQuery MultiSelect Plugin with ThemeRoller Support
Viewed 1457 times since Thu, Feb 4, 2010
Free JavaScript Date Picker - jsDatePick
Viewed 1342 times since Fri, Apr 9, 2010
How can I change session timeout value?
Viewed 978 times since Tue, Apr 27, 2010
File Upload in PHP - PHP File Upload Script
Viewed 2208 times since Thu, Nov 5, 2009