Fondu entre 2 images en css3

Bonjour à tous,

J'ai un bouton de résa comme celui ci :

 <a href="#" class="reserver"> Faire une réservation</a>

Voici mon css :

a.reserver { position: absolute; background: url(img/btn_booking.png) no-repeat top left; top:20px; left:780px; height: 66px;  width: 195px; display: block; text-indent: -5000px; }
a.reserver:hover {position: absolute; background: url(img/btn_booking.png) no-repeat bottom left; top:20px; left:780px; height: 66px;  width: 195px; display: block; text-indent: -5000px}

Quand je fais un hover sur le bouton, un autre s'affiche (j'utilise un sprite css), est il possible de faire une transition plus sexy en Fade par exemple en CSS3 ?

Merci pour votre aide

Bonjour,

Deux remarques pour commencer:
- Pour les boutons il existe un élément BUTTON. L'élément A c'est pour les liens (ou les ancres) normalement. Il est vrai que BUTTON est un peu pénible à styler, mais rien de bien méchant.
- La technique utilisée pose des problèmes d'accessibilité. Typiquement, si tes styles CSS sont appliqués mais que ton image n'est pas chargée pour une raison ou pour une autre (désactivée par l'utilisateur, latence réseau ou échec du chargement), le bouton devient invisible vu que le texte est masqué.

dreadstock a écrit :
est il possible de faire une transition plus sexy en Fade par exemple en CSS3 ?

Un background-image ou même un background n'a pas d'opacité propre en CSS. Donc tu ne peux pas faire de transition sur cette opacité inexistante. Donc non.

Tu peux par contre simuler cet effet en jouant sur un élément ou pseudo élément qui lui aura une opacité. Par exemple tu peux avoir l'image de l'état de survol en image de fond, et l'image de l'état normal en image de fond d'un pseudo-élément ::before ou ::after positionné en absolu par dessus l'élément. Et au survol, faire varier l'opacité globale (propriété opacity) du pseudo-élément.

Merci pour cette réponse très constructive.
En effet, les ::after ::before, peuvent m'intéresser. Aurais tu un tuto, car je ne vois pas trop comment faire.
Merci par avance
Modifié par fvsch (17 Feb 2012 - 21:12)

Pas spécialement de tutoriel en tête. Mais rapidement:

button {
  position: relative;
  background: url(button-hover.png);
  }
button::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  background: url(button-normal.png);
  transition: opacity linear .5s;
  }
button:hover::after,
button:focus::after {
  opacity: 0;
  }

Code de tête et pas testé, à adapter avec les préfixes qui vont bien pour l'effet de transition, dans tous les cas pas compatible IE 7-8.