Estilo de boton CSS similar al de la pagina mencionada

Angar Seguir

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
20 Feb 2011
Mensajes
91

Carlos Figueroa

1
Mi
Social Media
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Excelente comerciante!
Suscripción a IA
Desde
27 Mar 2012
Mensajes
3.434
El código para ese mismo botón de esa web es:

CSS:
Insertar CODE, HTML o PHP:
<style>.container{padding:0 15px;}
@font-face {
    font-family: 'BebasNeueRegular';
    src: url('http://cdn.all-gamez.com/2.0/fonts/BebasNeue-webfont.ttf') format('truetype'),
    url('http://cdn.all-gamez.com/2.0/fonts/BebasNeue-webfont.eot'),
    local('BebasNeueRegular');
    font-weight: normal;
    font-style: normal;
}


/* Estilo Barra/boton Descarga */
a {text-decoration:none}
.button-red-inner {
    text-shadow:0 -1px 1px rgba(0,0,0,0.25);
    border-bottom:1px solid rgba(0,0,0,0.25);
    background:url(../img/effect.png) scroll -3px -6px no-repeat;
    width: 100%;height: 30px;
    display:block;
}
.button-red {
    text-shadow: 1px 1px white, -1px -1px #ddd;
    color:#000;
    font-size:24px;
    text-align:center;
    font-family: Arial, Helvetica;
    display: inline-block;
    width: 100%;
    height: 30px;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(164,25,15)), color-stop(1, rgb(234,36,15)));
    background : -moz-linear-gradient(top, rgb(164,25,15) 25%, rgb(234,36,15) 100%);
    padding: 1px;
    background-size:40px;
}
#btn-wrap {
    text-align:center;
    position:relative;
    padding:5px;
    margin:10px auto 0;
    width:230px;
    height:50px;
    display:block;
    text-decoration:none;
    margin-bottom:10px;
    background: #242428;
        background: -webkit-gradient(linear, right top, left top, from(#dddddd), to(#b3b3b3));
        background: -moz-linear-gradient(-180deg, #dddddd, #b3b3b3 );
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
    overflow:hidden;
}
span.title{
    color:#d6d6e7;
    font:30px/58px "BebasNeueRegular", Helvetica, Arial, sans-serif;
    height:50px;
    width:230px;
    display:block;
    position:relative;
      -webkit-box-shadow: 0 -1px 0 #fd4032, 0 1px 1px #792e28;
        -moz-box-shadow:  0 -1px 0 #fd4032, 0 1px 1px #792e28;
        box-shadow:  0 -1px 0 #fd4032, 0 1px 1px #792e28;
    background: #52525c;
        background: -webkit-gradient(linear, 0 bottom, 0 top, from(#842c25), to(#ca0e00));
        background: -moz-linear-gradient(-90deg, #842c25, #ca0e00 );
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
    z-index:5;
    -webkit-transition:width .2s ease-out;
    -moz-transition:width .2s ease-out;
    -o-transition:width .2s ease-out;
}
#btn-wrap:hover span.title {
    font-size:19px;
    width:135px;
}
#info {
    position:absolute;
    height:50px;
    width:230px;
    top:5px;
    right:4px;
    -webkit-box-shadow:0 -1px 0 #404042, 0 1px 1px #0b0b0c;
        -moz-box-shadow:0 -1px 0 #404042, 0 1px 1px #0b0b0c;
        box-shadow:0 -1px 0 #404042, 0 1px 1px #0b0b0c;
    background: #2a2a2d;
        background:-webkit-gradient(linear, 0 bottom, 0 top, from(#000), to(#242424));
        background:-moz-linear-gradient(-90deg, #000, #242424 );
        -webkit-border-radius:50px;
        -moz-border-radius:50px;
        border-radius:50px;
    z-index:4;
}
#info p {
    width:65px;
    margin:12px 17px 0pt 0pt;
    padding:0;
    position:absolute;
    right:0;
    color:#7c7c84;
    font:11px/12px Helvetica, Arial, sans-serif;
    text-align:left;
}
.bg_socialUnloker {
    background:#50699d;
    padding:5px;
}
.btn_fblike{
    background-image:url(../img/fb_like_bt.png);
    background-position:0 104px;
    width:304px;
    height:104px;
    margin:0 auto;
    display:block;
}
.btn_fblike:active{
    background-position:0 0;
}


</style>

DIV QUE LLAMA TODO:

Insertar CODE, HTML o PHP:
<div class="descarga">
<a target="_blank" href="http://gpaste.us/280c4951" id="btn-wrap">
<span class="title">#1 Descargar</span>
<div id="info">
<p><strong>Descargar</strong>
<br>	
<span>5.45 GB</span>
</p>
</div>
</a>
</div>

Ya queda en ti tocar y modificar lo que quieras como el texto y eso.
 
Última edición:
Arriba