Efecto down to up > boton

AnsuR · #1 (**permalink**) 04/04/2012, 17:41

QUisiera saber si alguien tiene idea de como lograr el efecto del boton "detail" que esta en el slider, de esta web:

http://www.blueweb.sk

Como veran, cambia de imágen de abajo hacia arriba con un llamativo efecto, alguien sabe como puedo realizar algo exactamente igual?

#2 (**permalink**) 05/04/2012, 00:21

Yo lo haría de la siguiente manera:

Código HTML:

<html>
<head>
	<style>
		.upDownButton
		{
			width: 200px;
			height:30px;
			line-height:30px;
			background-color:red;
			display:block;
			position:relative;
			text-align:center;
			text-decoration:none;
			color:white;
			overflow:hidden;
		}
		
		.upDownButton .text
		{
			width: 100%;
			height:100%;
			position:absolute;
			left:0;
			top:0;
		}
		
		.upDownButton .background1, .upDownButton .background2
		{
			width: 100%;
			height:100%;
			position:relative;
			background-color:blue;
			-webkit-transition: top .25s linear;
		}
		
		.upDownButton .background2
		{
			background-color:green;
		}
		
		.upDownButton:hover .background1, .upDownButton:hover .background2
		{
			top:-30px;
			-webkit-transition: top .25s linear;
		}
	</style>
</head>
<body>
	<a class="upDownButton" href="">
		<div class="background1"></div>
		<div class="background2"></div>
		<div class="text">Enlace</div>
	</a>
</body>
</html>

Y para navegadores viejos que no acepten la propiedad transition deberías sustituirla por jQuery o si lo prefieres hacer tú mismo un pequeño código con JS que vaya aumentando progresivamente la propiedad top.

Espero que te sirva!

NOTA: Funciona en navegadores webkit. Si lo necesitas para Opera, Firefox... añade transitions con los prefijos correspondientes.

kseso? · #3 (**permalink**) 06/04/2012, 15:31

Use firebug (o sus equivalentes) para estas inquietudes. No dependerá de nadie para obtener la respuesta.

Efectivamente, danihxh, utiliza transitions de css. Pero no es sobre el "top" sino sobre background-position para cambiar la parte del sprite que utiliza en el background.

Si quiere informarse un poco al respecto, aquí una guía sobre transition.

#4 (**permalink**) 07/04/2012, 09:20

Cierto, no había caído en eso. Si utilizar imágenes de fondo para los botones es bastante más sencillo, ya que sólo tendrías un <a> con una imagen de fondo y cambiarías su background-position al pasar el cursor.

El código que puse yo te servirá si lo que quieres dar al botón un aspecto determinado mediante CSS.