Crear un botón con sprite que se ilumine al pasar el mouse

gful · 2011-08-12T22:20:04-0500

Hola,

Pues estoy dándole retoques a mi blog personal, y quiero poner un botón, que se ilumine cambie o haga algo cuando este tenga el mouse sobre el, creo que me entienden bien 🙂

Si alguien me enseñará como hacerlo se lo agradecería mucho.

lucianoche · 2011-08-12T22:42:53-0500

Necesitas saber HTML y CSS, voy a intentar explicarlo:

Código HTML:
Puede ser casi cualquier elemento html, generalmente son links (a) o botones (button o input).

HTML:

<a href="#" title="Titulo" id="boton-sprite" >Texto enlace</a>

Código CSS:
Lo más divertido, debes elegir cómo quieres que se vea el elemento en cada estado (sin el cursor encima / con el cursor encima)

HTML:

#boton-sprite {
	background: url('http://i55.tinypic.com/2ug2mae.png') no-repeat 0 0;
	display: block;
	width: 280px;
	height: 54px;
	text-indent: -99999px;
}

#boton-sprite:hover {
	background-position: 0 -54px;
}

Te dejo todo listo para que lo pruebas y puedas jugar un poco:

HTML:

<html>
<head>
<style>
#boton-sprite {
	background: url('http://i55.tinypic.com/2ug2mae.png') no-repeat 0 0;
	display: block;
	width: 280px;
	height: 54px;
	text-indent: -99999px;
}

#boton-sprite:hover {
	background-position: 0 -54px;
}
</style>
</head>
<body>
<a href="#" title="Titulo" id="boton-sprite" >Texto enlace</a>
</body>
</html>

Cualquier cosa me preguntas!

gful · 2011-08-12T23:31:43-0500

Voy a probarlo y te cuento 🙂

Crear un botón con sprite que se ilumine al pasar el mouse

gful

lucianoche

gful

Temas similares