Welcome to DirectSmile

Crossmedia Designer - Botones con efectos utilizando CSS

link this post written on 01/03/2012
  • To top

Hola a todos,

Aquí tenéis un ejemplo de como crear botones animados en Crossmedia Designer para realizar campañas con más estilo. Cuando hablo de botones pueden ser también Menús de las páginas.

Para lograr este efecto sin el problema de parpadeo al cargar la página ( como pasa en los módulos de "Image radio button" y "Image CheckBox" necesitaremos crear una sola imágen con los tres efectos en Photoshop uno debajo del otro y en orden ascendiente y asegurarte que la distancia que separa uno del otro sea la misma entre ellos ( si el botón tiene una altura de 52 píxeles, el segundo estado del botón debe estar colocado justo en el pixel 52 y el último en el píxel 104. Aquí tenemos un ejemplo de como seria la imagen:

Estados del botón

 

Ahora nos vamos con el Designer.

Para ello utilizaremos hojas de estilo (CSS), insertamos el mòdulo(layout) en nuestra página.

 

AÃADIMOS EL MÃDULO CSS

 

Y colocamos el siguiente código:

a.button {
    background: url(http://www.midominio.com/restimage/template/5/Demos/186/156/button.png) no-repeat 0 0;
    width: 186px;
    height: 52px;
    display: block;
    text-indent: -9999px;
}
a.button:hover {
  background-position: 0 -52px;
}
a.button:active {
  background-position: 0 -104px;
  border-bottom: medium none;
}

Con esto tenemos los estados del botón ( "Passive", "Hover" y "Active" ). Si no se quiere el estado de pulsado se puede eliminar.

a.button

Nuestro botón de ejemplo tiene el tamaño de 186px x 52px

background:url: La dirección url de nuestra imágen (la del ejemplo és la dirección de cuando su subes las imagen al designer)
display:block; : define como se muestra la imagen ( http://www.w3schools.com/cssref/pr_class_display.asp para más información )
text-indent: -9999px; : Ocultamos el texto en el bloque ( al tratarse de una imagen no queremos que se muestre el texto del enlace correspondiente ).

a.button:hover y a.button:active definen la posición de los otros estados de los botones.

Ahora necesitamos insertar un módulo (layout) HTML e insertar el siguiente código:

<a class="button" name="exemple_button" href="#">Button</a>

layout HTML

Y para finalizar aplicamos la acción a nuestro botón animado.

Directsmile Crossmedia, simplemente genial!
Saludos
Jaume

 

The author has edited this post (on 01/03/2012)
  • Statistics: 1 Posts | 8 Visits
created by mixxt
  • v1.1.1
  • (highfive)