Voici un tutorial CSS3 permettant de créer des boutons à l'effet très ... radioactif !

Cet effet, proposé par zurb.com utilise la puissance du CSS3 pour donner une impression d'animation à des boutons en quelques lignes de code !

Créez un simple élément HTML comme une balise a:

<a class="monBouton">Ca pulse !</a>

Ensuite, il faut déclarer l'animation CSS, pour le moment uniquement compatible navigateurs WebKit (Chrome et Safari):

@-webkit-keyframes greenPulse {
   from { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
   50% { background-color: #91bd09; -webkit-box-shadow:: 0 0 18px #91bd09; }
   to { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
}

Grâce à ce code CSS3, nous allons démarer le style du bouton à une couleur précise, puis à 50% de l'animation, nous allons lui changer sa couleur et sa zone d'ombre puis retourner à l'état d'origine.

Cet effet va donner un effet de "pulse".

Toutefois, il va falloir lancer cette animation sur le lien que nous avons créé précédemment, avec le code suivant:

a.monBouton {
   -webkit-animation-name: greenPulse;
   -webkit-animation-duration: 2s;
   -webkit-animation-iteration-count: infinite;
}

Nous déclarons le nom de l'animation, sa durée et le nombre d'itération pour jouer l'animation.

Et voici le résultat (Visible uniquement sur Chrome et Safari):

Vivement que tous les navigateurs se mettent à intégrer les propriétés CSS3, il y'a du potentiel !

Site officiel