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
Best Free Web Icons for Different Purposes
Viewed 1512 times since Mon, Dec 28, 2009
How to restrict access to your .htaccess file?
Viewed 1216 times since Sun, Mar 14, 2010
Open Source Trouble Ticket System - Jutda Helpdesk
Viewed 2573 times since Sat, Jan 9, 2010
tgrdfgdgfdg
Viewed 1232 times since Sun, Jan 17, 2010
SEO (Search Engine Optimization) vs SEM(Search Engine Marketing)
Viewed 1059 times since Mon, Jul 12, 2010
TinyBox - JavaScript Lightweight Modal Window Popup Script
Viewed 2182 times since Fri, Jan 8, 2010
Lorem Ipsum Dolor Sit Amet
Viewed 1809 times since Tue, Oct 6, 2009
MENU