Bouton d'entrée utilisant des portes coulissantes CSS

Question

Conçu spécifiquement pour les boutons de saisie tels que <input type="submit" value="Button Name">, ce bouton rond utilise la technique sliding doors qui est assemblée à partir d'une seule image.

Démo: Click to review the source code and demo the code in action
Demo: Click to see a video demo of the style in Mac browsers: Firefox, Safari, Chrome and Opera

Ce style de bouton permet:

• Résout large question bouton pour les noms longs bouton pour les navigateurs IE.
• Résout un problème avec les navigateurs IE lorsque la pièce coulissante droite flotterait sur la page lorsque le bouton est caché côté serveur.
• Résout le problème de texte fragmenté pour les navigateurs IE lorsque vous faites défiler vers le bas, puis sauvegardez la page.
• C'est l'alternative parfaite pour les concepteurs lorsque vous ne pouvez pas utiliser le contrôle bouton ASP .Net tels que <asp:Button id="b1" Text="Submit" runat="server" /> dans votre code
• Cross compatible pour safari, à savoir, firefox, chrome et opéra . watch video

Answer 1

Je pense que vous avez juste besoin de changer une pseudo-classe.

span.button input.form_button:hover { 
    background-position:left -39px; 
    color:#FFFFFF; 
} 

devrait être

span.button:hover input.form_button { 
    background-position:left -39px; 
    color:#FFFFFF; 
} 

Edit: Il est la ligne 52 de la source de démonstration