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.
There are no comments for this article. Be the first to post a comment.
Security Code Security Code
Related Articles RSS Feed
Which hosting plans support IIS Mod-Rewrite?
Viewed 6278 times since Sat, Oct 10, 2009
Search Engine Optimization: Tags of Importance for SEO
Viewed 1196 times since Tue, Oct 12, 2010
PHP Script For PDF to HTML Conversion
Viewed 7272 times since Tue, Dec 15, 2009
AeroSQL - Web Based MySQL Management
Viewed 1403 times since Wed, Feb 24, 2010
Meerkat - jQuery Plugin for Promotional Content
Viewed 1321 times since Tue, Dec 29, 2009
CSS Positioning - Absolute, Relative & Fixed
Viewed 1633 times since Thu, Dec 3, 2009
Easy Slider jQuery Plugin - Easy Image or Content Slider
Viewed 1898 times since Tue, Jan 12, 2010
10 Most Popular JavaScript Frameworks
Viewed 1387 times since Thu, Jul 8, 2010
Open Source WYSIWYG Editor
Viewed 1550 times since Thu, Jan 7, 2010
What is jQuery?
Viewed 1087 times since Tue, Dec 1, 2009