Usability post explica como implementar un efecto apretado a un botón en los enlaces personalizados usando solo CSS3.

Botón vinculo con CSS3

Ejemplo:


Para ponerlo en tu blog te diriges a tu plantilla y con Ctrl+F buscas ]]></b:skin> y justo encima colocas el CSS:

/* Botón en general */
.button-link {
    font-size: 18px; /* tamaño de letra */
    width: 150px; /* ancho */
    text-align: center; /* alineación del texto */
    padding: 10px 15px; /* expansión */
    background: #4479ba; /* color de fondo */
    color: #fff; /* color de texto */
    -webkit-border-radius: 4px; /* borde redondeado para webkit */
    -moz-border-radius: 4px; /* borde redondeado para mozilla */
    border-radius: 4px; /* borde redondeado */
    border: solid 1px #20538d; /* borde */
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); /* texto con sombra */
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); /* caja con sombra para webkit */
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); /* caja con sombra para mozilla */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); /* caja con sombra */
    -webkit-transition-duration: 0.2s; /* duración de transición para webkit */
    -moz-transition-duration: 0.2s; /* duración de transición para mozilla */
    transition-duration: 0.2s; /* duración de transición */
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

/* Botón hover */
.button-link:hover {
    background: #356094; /* Color de fondo */
    border: solid 1px #2a4e77; /* Borde */
    text-decoration: none; /* Decoración de texto */
}

/* Botón activado */
.button-link:active {
    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); /* Caja con sombra para webkit */
    -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); /* Caja con sombra para mozilla */
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); /* Caja con sombra */
    background: #2e5481; /* Color de fondo */
    border: solid 1px #203e5f; /* Borde */
}


Ahora te diriges a elementos HTML/Javascript o en una entrada y colocas el HTML:

<p class="button-link"><b>B o t ó n</b></p>

Deja un comentario

                                                                                                                                                                                                                                                                                                                                                       
Ciudad Blogger

Hola, Bienvenido a Blog 2000!

Puedes seguirnos en las redes sociales o suscribirte al feed.

Blog 2000 Blog 2000 Blog 2000 Blog 2000

¡Suscríbete a nuestro blog!

Recibe en tu correo las últimas noticias del blog. Sólo ingresa tu correo para suscribirte.

Blog 2000