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.
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
Free Visualization Components For Flex (AS3)
Viewed 647 times since Sun, Jan 3, 2010
dygraphs JS Charts - Free JavaScript Charts
Viewed 757 times since Sun, Dec 13, 2009
Open Source Online Invoice System - siwapp
Viewed 1051 times since Thu, Jan 7, 2010
Open Source Web Analytics Framework
Viewed 673 times since Sat, Jan 30, 2010
Embeddable Google Document Viewer For Websites
Viewed 762 times since Fri, Mar 11, 2011
Free IP to Country, IP to City Database & API
Viewed 1050 times since Thu, Dec 31, 2009
Advanced Backup System - PHP Backup Script
Viewed 888 times since Wed, Jul 28, 2010
dTree - Flexible JavaScript Tree Menu
Viewed 1204 times since Thu, Jan 14, 2010
Google Web Toolkit - Version 2 Released
Viewed 815 times since Tue, Dec 15, 2009
MENU