La plataforma Futudownloads está en desarrollo.

11 may. 2012

Botones con CSS3

Botones con CSS3 para Blogger, Sitio Web.
Con la llegada de CSS3 y HTML5 ahora la mayoria de botones se hacen con css3 en ves de con imagenes.
y este es un complemento de Red Team Design.
Estos botones se pueden utilizar para varias cosas incluso de botones sociales.
  • Es muy facil de instalar y es solo CSS3.
  • Ve a Plantilla, luego has click en edicion de HTML.
  • Luego has click en Expandir plantilla de artilugios y busca la etiqueta ]]></b:skin> Y justo encima de ella agrega lo siguiente.
/* red-team-design.com buttons */
.button {       
display: inline-block;
white-space: nowrap;
background-color: #ddd; /*color de fondo del boton */
background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -ms-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(top, #eee, #ccc);
border: 1px solid #777; /* ancho y color del borde */
padding: 0 1.5em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica; /* Fuente de texto del boton */
text-decoration: none;
color: #333; /* Color de fuente del boton */
text-shadow: 0 1px 0 rgba(255,255,255,.8);
-moz-border-radius: .2em;
-webkit-border-radius: .2em;
border-radius: .2em;
-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}
.button:hover {
background-color: #eee; /* color de fondo del boton al pasar el cursor */
background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
background-image: -moz-linear-gradient(top, #fafafa, #ddd);
background-image: -ms-linear-gradient(top, #fafafa, #ddd);
background-image: -o-linear-gradient(top, #fafafa, #ddd);
background-image: linear-gradient(top, #fafafa, #ddd);
}
.button:active {
-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
position: relative;
top: 1px;
}
.button:focus {
outline: 0;
background: #fafafa;
}   
.button:before {
background: #ccc;
background: rgba(0,0,0,.1);
float: left;       
width: 1em;
text-align: center;
font-size: 1.5em;
margin: 0 1em 0 -1em;
padding: 0 .2em;
-moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
-webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
-moz-border-radius: .15em 0 0 .15em;
-webkit-border-radius: .15em 0 0 .15em;
border-radius: .15em 0 0 .15em;    
pointer-events: none;       
}
/* Buttons and inputs */
button.button, input.button {
cursor: pointer;
overflow: visible; /* removes extra side spacing in IE */
}
/* removes extra inner spacing in Firefox */
button::-moz-focus-inner {
border: 0;
padding: 0;
}
/* If line-height can't be modified, then fix Firefox spacing with padding */
input::-moz-focus-inner {
padding: .4em;
}
/* The disabled styles */
.button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover {
background: #eee;
color: #aaa;
border-color: #aaa;
cursor: default;
text-shadow: none;
position: static;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;       
}
/* Hexadecimal entities for the icons */
.add:before {
content: "\271A";
}
.edit:before {
content: "\270E";       
}
.delete:before {
content: "\2718";       
}
.save:before {
content: "\2714";       
}
.email:before {
content: "\2709";       
}
.like:before {
content: "\2764";       
}
.next:before {
content: "\279C";
}
.star:before {
content: "\2605";
}
.spark:before {
content: "\2737";
}
.play:before {
content: "\25B6";
}
/* Social media buttons */   
.tw, .fb, .tw:hover, .fb:hover {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.5)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
}
.tw, .tw:focus {
background-color: #88E1E6; /* Color de fondo del boton de Twitter */
}
.fb, .fb:focus {
background-color: #3C5A98; /* Color de fondo del boton de facebook */
color: #fff; /* color de texto del boton de facebook */
text-shadow: 0 1px 0 rgba(0,0,0,.4);       
}
.tw:hover {
background-color: #b1f0f3; /* color de fondo del boton de twitter al pasar el cursor */
}
.fb:hover {
background-color: #879bc3; /* color de fondo del bton de facebook al pasar el cursor */
}
.tw:before {
content: "t"; /* letra que aparece de logotipo de twitter */
background: #91cfd3; /* fondo del logo */
background: rgba(0,0,0,.1);       
color: #fff; /* color de logo */
font-family: verdana; /* fuente del logo */
text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.fb:before {
content: "f"; /* letra que aparece de logotipo de facebook */
background: #4467ac; /* fondo del logo */
background: rgba(0,0,0,.1);       
color: #fff; /* color del logo */
text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
  • Guarda los cambios.
  • Ahora cuando hagas una entrada (en HTML) o en el sidebar (HTML/Javascript)
  • podras agregar los siguientes botones CSS3.
Boton normal
Boton normal
<a href="URL del enlace" class="button">Boton Normal</a>

_________________________________________________________________________
Boton normal
Add
<a href="URL del enlace" class="button add">Agregar</a>

_________________________________________________________________________
Boton editar
Editar
<a href="URL del enlace" class="button edit">Editar</a>

_________________________________________________________________________
Boton eliminar
Eliminar
<a href="URL del enlace" class="button delete">Eliminar</a>

_________________________________________________________________________
Boton guardar
Guardar
<a href="URL del enlace" class="button save">Guardar</a>

_________________________________________________________________________
Boton email

<a href="URL del enlace" class="button email">Email</a>

_________________________________________________________________________
Boton me gusta

<a href="URL del enlace" class="button like">Me gusta</a>

_________________________________________________________________________
Boton siguiente

<a href="URL del enlace" class="button next">Siguiente</a>

_________________________________________________________________________
Boton favorito
Favorito
<a href="URL del enlace" class="button star">Favorito</a>

_________________________________________________________________________
Boton spark
Spark
<a href="URL del enlace" class="button spark">Spark</a>

_________________________________________________________________________
Boton play
Play
<a href="URL del enlace" class="button play">Play</a>

_________________________________________________________________________
Boton twitter
Twitter iho_jose
<a href="URL del enlace" class="button tw">Twitter</a>

_________________________________________________________________________
Boton facebook
facebook FUTUdownloads
<a href="URL del enlace" class="button fb">facebook</a>

_________________________________________________________________________
Boton desactivado
Desactivado
<a href="URL del enlace" class="button" disabled>desactivado</a>

_________________________________________________________________________
  • lo que esta en rojo es donde ira el texto que le pondras al boton
  • lo que esta en azul sera la URL que le pondras al boton
  • Listo con eso ya sabes usar el boton

Fuente | red-team-design.com