| Autor |
Mensaje |
-
animeeasy
Nuevo
|
 07-11-2011, 20:21 (UTC)
Título del mensaje: [CSS]Super Awesome botones con CSS3 y RGBA |
|
|
Hola chicos pues otra vez anduve por la web buscando este tipo de botones css3
No fue nada difícil agregarlos a mi web :D así que os muestro
Vista previa >> 
Bueno aquí la fuente de donde lo saque http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba
Aquí los códigos
código Por encima o por debajo de la pagina
Código: <style type="text/css">
.awesome{
background: #222 url(http://www.zurb.com/images/alert-overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 1px #222;
border-bottom: 1px solid #222;
position: relative;
cursor: pointer;
}
.awesome {
...
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
...
}
.awesome:active { top: 1px; }
.small.awesome, .small.awesome:visited { font-size: 11px; padding: ; }
.awesome, .awesome:visited,
.medium.awesome, .medium.awesome:visited { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
.large.awesome, .large.awesome:visited { font-size: 14px; padding: 8px 14px 9px; }
.green.awesome, .green.awesome:visited { background-color: #91bd09; }
.green.awesome:hover { background-color: #749a02; }
.blue.awesome, .blue.awesome:visited { background-color: #2daebf; }
.blue.awesome:hover { background-color: #007d9a; }
.red.awesome, .red.awesome:visited { background-color: #e33100; }
.red.awesome:hover { background-color: #872300; }
.magenta.awesome, .magenta.awesome:visited { background-color: #a9014b; }
.magenta.awesome:hover { background-color: #630030; }
.orange.awesome, .orange.awesome:visited { background-color: #ff5c00; }
.orange.awesome:hover { background-color: #d45500; }
.yellow.awesome, .yellow.awesome:visited { background-color: #ffb515; }
.yellow.awesome:hover { background-color: #fc9200; }
/* Sizes ---------- */
.small.awesome {
font-size: 11px;
}
.medium.awesome {
font-size: 13px;
}
.large.awesome {
font-size: 14px;
padding: 8px 14px 9px;
}
/* Colors ---------- */
.blue.awesome {
background-color: #2daebf;
}
.red.awesome {
background-color: #e33100;
}
.magenta.awesome {
background-color: #a9014b;
}
.orange.awesome {
background-color: #ff5c00;
}
.yellow.awesome {
background-color: #ffb515;
}
</style>
para cambiarles el color valla a la parte que dice :
background-color: #ffb515;
Pueden ponerle los colores que quieran
Código para agregar los colores:
Botones grandes:
Código: <a class="large awesome">Super Awesome Button »</a> <br /><br />
<a class="large blue awesome">Awesome Blue Button »</a> <br /><br />
<a class="large magenta awesome">Awesome Magenta Button »</a> <br /><br />
<a class="large red awesome">Awesome Red Button »</a> <br /><br />
<a class="large orange awesome">Awesome Orange Button »</a> <br /><br />
<a class="large yellow awesome">Awesome Yellow Button »</a>
</div>
</div>
Para agregar Botones medios :
Código:
<div class="five columns">
<a class="medium awesome">Super Awesome Button »</a> <br /><br />
<a class="medium blue awesome">Awesome Blue Button »</a> <br /><br />
<a class="medium magenta awesome">Awesome Magenta Button »</a> <br /><br />
<a class="medium red awesome">Awesome Red Button »</a> <br /><br />
<a class="medium orange awesome">Awesome Orange Button »</a> <br /><br />
<a class="medium yellow awesome">Awesome Yellow Button »</a>
Botones chicos:
Código: <div class="four columns">
<button class="small awesome">Super Awesome Button »</button> <br /><br />
<button class="small blue awesome">Awesome Blue Button »</button> <br /><br />
<button class="small magenta awesome">Awesome Magenta Button »</button> <br /><br />
<button class="small red awesome">Awesome Red Button »</button> <br /><br />
<button class="small orange awesome">Awesome Orange Button »</button> <br /><br />
<button class="small yellow awesome">Awesome Yellow Button »</button>
</div>
Fin #
Gracias por ver el tutorial Comenten [/code]
Ultima edición por animeeasy el Mar Nov 08, 2011 1:37 pm; editado 6 veces
|
|
|
↑
|
|
 |
-
brianpwg
Semi-Experto
|
07-11-2011, 20:44 (UTC)
Título del mensaje: Re: Super Awesome botones con CSS3 y RGBA |
|
|
Cita: .awesome{
background: #222 url(/images/alert-overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 1px #222;
border-bottom: 1px solid #222;
position: relative;
cursor: pointer;
Te falta el degradado el texto amigo.
Tiene que ser una similar a este
Aqui esta el que debes poneer:
Código: http://www.zurb.com/images/alert-overlay.png
Tambien te falta el efecto hover, este es el codigo para eso:
.awesome:hover { background-color: #111; color: #fff; }
Código: .awesome:active { top: 1px; }
.small.awesome, .small.awesome:visited { font-size: 11px; padding: ; }
.awesome, .awesome:visited,
.medium.awesome, .medium.awesome:visited { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
.large.awesome, .large.awesome:visited { font-size: 14px; padding: 8px 14px 9px; }
.green.awesome, .green.awesome:visited { background-color: #91bd09; }
.green.awesome:hover { background-color: #749a02; }
.blue.awesome, .blue.awesome:visited { background-color: #2daebf; }
.blue.awesome:hover { background-color: #007d9a; }
.red.awesome, .red.awesome:visited { background-color: #e33100; }
.red.awesome:hover { background-color: #872300; }
.magenta.awesome, .magenta.awesome:visited { background-color: #a9014b; }
.magenta.awesome:hover { background-color: #630030; }
.orange.awesome, .orange.awesome:visited { background-color: #ff5c00; }
.orange.awesome:hover { background-color: #d45500; }
.yellow.awesome, .yellow.awesome:visited { background-color: #ffb515; }
.yellow.awesome:hover { background-color: #fc9200; }
Deberias probarlo siempre que publiques algo similar al mismo y fijarte si esta igual al original,.
Ultima edición por brianpwg el Lun Nov 07, 2011 4:51 pm; editado 1 vez
|
|
|
↑
|
|
|
-
animeeasy
Nuevo
|
07-11-2011, 20:56 (UTC)
Título del mensaje: Gracias |
|
|
Gracias brian  |
|
|
↑
|
|
|
-
animeeasy
Nuevo
|
07-11-2011, 21:00 (UTC)
Título del mensaje: |
|
|
Así esta bien? |
|
|
↑
|
|
|
-
guias-programas
Semi-Experto
Ubicación: Argentina - Bs.As
|
07-11-2011, 21:47 (UTC)
Título del mensaje: |
|
|
animeeasy escribió: Así esta bien?
Buen Codigo !
Una Opinion
1.- Si Posteas algo ponelo bien , (Se agradece a nuestro amigo BRIANPWG por Ponerlo bien ! :D)
2.- No agas 2 comentarios Segidos |
|
|
↑
|
|
|
|
