Boton "Skip"

comentar



Un boton azul muy elegante con estilo 'glossy' horizontal que puedes utilizar para enlazar multitud de cosas en tu blog o web. Esta creado solo con CSS, no contiene ninguna imagen. Para añadirlo, lo primero es poner los estilos CSS en el <body> de la plantilla.


<style>
button.skip {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #8C9CBF;
    background-image: -moz-linear-gradient(center top , #8C9CBF 0%, #546A9E 50%, #36518F 50%, #3D5691 100%);
    border-color: #172D6E #172D6E #0E1D45;
    border-radius: 5px 5px 5px 5px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 0 #B1B9CB inset;
    color: #FFFFFF;
    font: bold 35px "helvetica neue",helvetica,arial,sans-serif;
    padding: 7px 0 8px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px 1px #000F4D;
    width: 200px;
}
button.skip:hover {
    background-color: #7F8DAD;
    background-image: -moz-linear-gradient(center top , #7F8DAD 0%, #4A5E8C 50%, #2F477D 50%, #364C80 100%);
    cursor: pointer;
}
button.skip:active {
    box-shadow: 0 0 20px 0 #1D2845 inset, 0 1px 0 white;
}
</style>



Y una vez hecho esto, solo queda añadir este codigo (modificando lo que esta en rojo) cada vez que quieras mostrar el boton:


<a href="ENLACE"><button class="skip">TEXTO</button></a>



Y este sera el resultado:





.
¿Te gusto? Compartelo





articulos relacionados