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
SlideDeck - Cool jQuery Slideshow Plugin
Viewed 1311 times since Thu, Feb 4, 2010
Speech Bubbles With Pure CSS3
Viewed 1163 times since Fri, Mar 12, 2010
What is jQuery?
Viewed 1037 times since Tue, Dec 1, 2009
jQuery MultiSelect Plugin with ThemeRoller Support
Viewed 2377 times since Thu, Feb 4, 2010
Pastie - Pastebin to Share Source Code with Syntax Highlighting
Viewed 1189 times since Mon, Jan 11, 2010
SEO Poisoning - What are SEO Poisoning Attacks?
Viewed 1537 times since Mon, Apr 5, 2010
25 Graph & Chart Solutions For Web Developers
Viewed 33896 times since Mon, Feb 1, 2010
PHP Interview Questions with Answers - Part 1
Viewed 1414 times since Mon, Jan 11, 2010
OpenCart - Open Source Shopping Cart
Viewed 1655 times since Fri, Jan 1, 2010