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
3.5 (2)
Article Rating (2 Votes)
Rate this article
Attached Files
There are no attachments for this article.
Comments
There are no comments for this article. Be the first to post a comment.
Name
Email
Security Code Security Code
Related Articles RSS Feed
How to password protect folder/files using htaccess file?
Viewed 1217 times since Sun, Mar 14, 2010
Web Usability Testing Tool - Clixpy
Viewed 1679 times since Sat, Jan 9, 2010
Coming Soon Template
Viewed 1272 times since Thu, Nov 12, 2009
IE6 CSS Fixer - Web-Based IE6 CSS Fix Tool
Viewed 1215 times since Thu, Dec 31, 2009
CSS Positioning - Absolute, Relative & Fixed
Viewed 1576 times since Thu, Dec 3, 2009
Free 3D Flash Image Slider - Piecemaker
Viewed 2116 times since Sun, Apr 4, 2010
jqPlot - jQuery Charts & Plotting Plugin
Viewed 1592 times since Sat, Jan 9, 2010
Free JavaScript Charts Library - JS Charts
Viewed 1236 times since Sun, Dec 13, 2009
imgAreaSelect - jQuery Plugin To Select Areas On Images
Viewed 1606 times since Thu, Dec 31, 2009
SEO (Search Engine Optimization) vs SEM(Search Engine Marketing)
Viewed 993 times since Mon, Jul 12, 2010