Ir al contenido principal

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

Entradas populares de este blog

Blogger:Usar @font-face en tu Blog de Blogger

Muchos sitios están usando @font-face y es porque les permite usar fuentes en sus sitios web que son muy creativas y dan más estilo al sitio. Lo malo que tiene esta funcion es que solo se pueden usar fuentes si están en el mismo servidor de el sitio, lo que quiere decir que en blogs como los de Blogger no funcionaría. Pero eso se ha estado solucionando con el tiempo. Un dia me puse a buscar como hacerlo y no encontraba la manera hasta que un día pude hacerlo cuando puse una fuente codificada, funcionó instantaneamente, lo unico que sé es que funciona en Firefox, Firefox Aurora, RockMelt y Google Chrome y no se si funcione en los demás navegadores pues no tengo los demás y IE9 no me funciona bien . "Si es compatible en los otros navegadores lo comentan para agregarlo a la lista de compatibles" Sigue los siguientes pasos y podrás cualquier fuente y poner con @font-fae en tu Blog. Se usarán imagenes de ilustracion para que sea más entendible, has click en donde diga (ve

Paquetes de Idioma Windows 7 MUI (64bits / x64)

Paquete de idiomas para windows 7 para aquellos que nacesitan tener varios idiomas en su pc. Es compatible con la mayoria de versiones de Windows 7 Hay que tomar nota de que si se instalan demasiados paquetes de idioma adicionales, el espacio de disco y el rendimiento del sistema puede verse afectados. En particular, el espacio de disco y el rendimiento del sistema se ven afectados durante las operaciones de servicios, tales como las instalaciones de Service Pack (KB972813). Por lo tanto, se recomienda sólo añadir un paquete de idioma, el que necesitares exclusivamente. Paquete de idiomas Windows 7 RTM MUI 64-bit (x64) Arabe Descargas Bulgaro Descargas Chino (Simplifi...) Descargas Chino (Tradicio...) Descargas Croata Descargas Checo Descargas Danés Descargas Holandés Descargas Inglés Descargas Estonio Descargas Finlandés Descargas Francés Descargas Alemán Descargas Griego Descargas Hebreo Descargas Húngaro Descargas Italiano

Manual:Codigos y plantillas Aegisub

Aegisub es un programa que le permite a las personas añadir subtitulos y karaoke a sus videos, actualmente Aegisub para dar esos estilos y animaciones a los subtitulos y karaokes usa una serie de codigos que activan dichas animaciones en un tiempo y colores determinados, como un script en HTML. Los que más utilizan este programa son los Fansubs y empresas de karaoke. Los codigos son dificiles de aprender pero no imposibles si mantienes practica. REGLAS DE LOS CÓDIGOS. Debes saber unas reglas para los codigos y es que cada coigo está entre parentesis {} . El codigo inicia con una diagonal inversa (invert slash) \ . El indicador de la accion biene negreado . El codigo numerico saldrá normal. El codigo viene antes del texto. Cada codigo se divide con una diagonal inversa \ . BÁSICO. _________________________________________________________________________ Lo basico son esos codigos que son los más utilizados y faciles, además de que el mismo programa te da las opciones