Cómo implementar botones CSS3 de manera efectiva

Zarat · 29 Mar 2014

Hola gente de ForoBeta hace tiempo quiero poner unos botones con css3 en mis post pero no encuentro la manera .-. espero me puedan ayudar

Este es el botón que quiero poner en los post T_T http://www.basdower.us/pruebas/boton.html

Anteriormente logre poner el botón asi pero no cargaban los estilos por completo :ambivalence:

Insertar CODE, HTML o PHP:

<style>
.boton 
etc
etc
</style>

<div class="boton">
	  <a href="#">Descargar</a>
	  <p class="top">Clic para</p>
 	  <p class="bottom">0MB .RAR</p>
	</div>

Les dejo el css del boton espero me puedan ayudar :witless:

http://www.basdower.us/pruebas/Boton.css

Gracias :encouragement: :encouragement:

xcite · 29 Mar 2014

Ya intentaste ponerlo todo directo ? Checa si algun CSS no entra en conflicto, en teoría debería de funcionar así:

Insertar CODE, HTML o PHP:

<style>
.BotonAzul {
	margin: 150px auto;
	width: 200px;
}


.BotonAzul a {
  display: block;
  height: 50px;
  width: 200px;
  background: #00b7ea;

   color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;

  -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
        border-radius: 10px;

        -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
   -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
        box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

        background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}

p {
  background: #222;
  display: block;
  height: 40px;
  width: 180px; 
  margin: -50px 0 0 10px;

  text-align: center;
  font: 12px/45px Helvetica, Verdana, sans-serif;
  color: #fff;

  position: absolute;
  z-index: -1;
   
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
 
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

           -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
   
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.BotonAzul a, p {
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
   
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);      
}

.BotonAzul:hover .top {
  margin: -80px 0 0 10px;
  line-height: 35px;
}
 
.BotonAzul:hover .bottom {
  margin: -10px 0 0 10px;
}

.BotonAzul a:active {
background: #00b7ea;
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
 
}
 
.BotonAzul:active .bottom {
  margin: -20px 0 0 10px;
}
 
.BotonAzul:active .top {
  margin: -70px 0 0 10px;
}
</style>
	<div class="BotonAzul">
	  <a href="#">Descargar</a>
	  <p class="top">Clic para</p>
 	  <p class="bottom">37MB .RAR</p>
	</div>

Zarat · 29 Mar 2014

si si, lo puse completo solo que en el tema abrevie con (etc, etc) pero asi al pasar el cursor no se muestran los párrafos.

Insertar CODE, HTML o PHP:

<p class="top">Clic para</p>
 	  <p class="bottom">37MB .RAR</p>

OLMID · 30 Mar 2014

Es posible que sea por el z-index:-1; que tienen los objetos p y se queden debajo de la página y no se muestren
Prueba quitando esa referencia y coloca los objetos p por encima en el código, así:

HTML:

<div class="BotonAzul">
<p class="top">Clic para</p>
<p class="bottom">37MB .RAR</p>
<a href="#">Descargar</a>
</div>

Ve probando y, si lo require, ve modificando el css poco a poco
En wordpress hay posibilidad que automáticamente se envuelvan los enlaces con objetos p, observa el código fuente por si es tu caso, eso haría que tengas que añadir algo más a tu css

Saludos

edito.- La parte de css referente al objeto p debes de cambiarla por .BotonAzul p, si no hará referencia a todos los p de tu sitio
Y esta .BotonAzul a, p la cambias por .BotonAzul a, .BotonAzul p por la misma razón

Zarat · 30 Mar 2014

o Gracias eso me soluciono algunos errores pero sigue sin mostrarse en los post, aunque en el sidebar se ve perfecto con el mismo código -_-

OLMID · 31 Mar 2014

Lo he instalado y he tenido que hacer algunos pequeños cambios para que funcione bien en los post, te dejo el código que he usado

Al final del archivo style.css he añadido este css

Insertar CODE, HTML o PHP:

.BotonAzul {
width: 200px;
position:relative;
top:40px; /* Modifica esto a tu gusto */
display: block;
}
.BotonAzul .enlace_des {
position:absolute;
display: block;
height: 50px;
width: 200px;
padding:0;
}
.BotonAzul .enlace_des a {
position:absolute;
display: block;
height: 50px;
width: 200px;
color: white;
font: 17px/50px Helvetica, Verdana, sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
background: #00b7ea;
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.BotonAzul .bottom, .BotonAzul .top {
background: #222;
display: block;
height: 40px;
width: 180px; 
margin: 5px 0 0 10px;
padding:0;
text-align: center;
font: 12px/45px Helvetica, Verdana, sans-serif;
color: #fff;
position: absolute;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.BotonAzul:hover .top {
margin: -30px 0 0 10px;
line-height: 35px;
} 
.BotonAzul:hover .bottom {
margin: 40px 0 0 10px;
} 
.BotonAzul:active .bottom {
margin: 30px 0 0 10px;
} 
.BotonAzul:active .top {
margin: -20px 0 0 10px;
}

Y en los post he puesto esto:

HTML:

<div class="BotonAzul">
<p class="top">Clic para</p>
<p class="bottom">37MB .RAR</p>
<p class="enlace_des"><a href="#">Descargar</a></p>
</div>

Saludos

Zarat · 31 Mar 2014

Muchísimas gracias me va perfecto :encouragement: y perdón por todas las molestias. :ambivalence:

Cómo implementar botones CSS3 de manera efectiva

Zarat Seguir

xcite

Zarat

OLMID

Zarat

OLMID

Zarat