[Résolu] Bouton multiligne en CSS3 et :hover

Bonjour tout le monde,

C'est bien la première fois que je poste pour poser une question, mais là, je m'arrache les cheveux sur la mise en forme d'un cristi de "bouton" en CSS3 (c'est en fait un lien très mis en forme mais peut-être qu'un vrai <button></button> serait plus approprié ?). Voilà ce que ça devrait donner en image :

Pour ce qui est du code, j'ai obtenu ce que je voulais comme mise en forme a grand renfort de span et de class, mais du coup impossible de faire un :hover correct qui fasse changer tout le bouton d'un coup. Pour le moment quand je survole, les bouts de texte changent indépendamment les uns des autres...

Voici les codes employés pour le moment :

<a href="" class="button"><span class="lightgreen">Espace</span><span class="darkgreen big subtitle">Concours</span></a>

Et le CSS :

.button {
	display: block;
	position: relative;
	width: 220px;
	height: 45px;
	text-align: left;
	text-decoration: none;
	font-family: "Bree Serif", serif;
	font-weight: normal;
	margin-bottom: 5px;
	padding-top: 15px;
	padding-right: 20px;
	padding-bottom: 5px;
	padding-left: 20px;
	background: #f2f2f2; /* Old browsers */
	background: -moz-linear-gradient(top,  #f2f2f2 0%, #cccccc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f2f2f2 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f2f2f2 0%,#cccccc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f2f2f2 0%,#cccccc 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #f2f2f2 0%,#cccccc 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 1px #B0B2B3;
}

.button:hover, .button span:hover{
	color:#FFF;
	} 

/* Button span class for styling*/

.subtitle {
	display: block;
	}
	
.small {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:0.75em;
	line-height:1.8em;
	}
	
.big {
	font-family:"Bree Serif", serif;
	font-size:1.2em;
	line-height:1em;
	}

.lightgreen{
	color:#40A52B;
	}

.darkgreen {
	color:#00632E;
	}

J'ai de plus en plus le sentiment que ce que je cherche à faire n'est tout simplement pas faisable de manière élégante si on s'en tient au CSS et l'HTML pur et dur. Une solution ou une piste à me donner ?
Modifié par leKaribou (09 Nov 2012 - 17:26)

Bonjour,

as-tu essayé de rajouter .button:hover span en plus de .button:hover ?

Si j'ai bien compris ton souci, je pense que ça devrait améliorer le rendu au survol. En l'occurrence, dans ton exemple le changement de couleur se fait au survol du bouton et du span, hors tout devrait se jouer en même temps au survol du bouton...

Hum, j'ai essayé tellement de chose que je ne me souviens plus, je vais regardé ça pis je te reviens. Merci pour ta réponse.

Edit après essai : MON HÉROS! Ça fonctionne! Merci merci merci!
Modifié par leKaribou (09 Nov 2012 - 17:26)

Ravi d'avoir pu aider