Hacker of the Web
Tus ideas en código!...y mas

Estas en: > > CSS3: Sorprendentes botones para formularios
22ene2010

CSS3: Sorprendentes botones para formularios

CSS3: Sorprendentes botones para formularios

Si bien los formularios son de gran utilidad para que los visitantes de un determinado sitio web, puedan interactuar con el administrador o con la misma página. Pero siendo honestos la mayoría de estos formularios tienen aspecto horrible, aunque no deje de funcionar como se espera.

Es ahí donde interviene la creatividad, una herramientas y una taza de café(esta ultima es opcional :P). Las herramientas serán: HTML y CSS.

En cuanto a HTML tendremos los elementos del Formulario: 
<form>
  <button class='botonSexy'>Este es un boton Sexy</button>
  <textarea class='textAreaSexy'>Este es un textarea muy Sexy</textarea>
<form>


Mientras que en CSS, implementamos los nuevos atributos CSS3: Box-Shadow y Text-Shadow colocamos lo siguiente:
.botonSexy{
display: inline-block;
padding: 5px 10px 6px;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-box-shadow: 0 0 3px #999;
-khtml-box-shadow: 0 0 3px #999;
-webkit-box-shadow: 0 0 3px #999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-shadow: 0 -1px 1px rgba(0,0,0,.25);
border:0px solid transparent;
position: relative;
cursor: pointer;
}
.textAreaSexy{
font-weight: bold;
font-family: Helvetica;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-box-shadow: -1px -1px 3px #333;
-moz-box-shadow: -1px -1px 3px #333;
-webkit-box-shadow: -1px 1px 3px #333;
text-shadow:2px 2px 5px rgba(255,255,255,.7);
}


Que nos dará esto como resultado:




Un bonito botón!!. Pero, simpre hay peros, además no me convence. Que te parece si le ponemos un poco de colores y en RGBA. Para esto solo modificaremos un poco el HTML: 
<form>
  <button class='botonSexy negro'>Este es un boton Sexy</button>
  <textarea class='textAreaSexy negro'>Este es un textarea muy Sexy</textarea>
<form>


Y en cuanto a CSS, solo agregaremos unas clases:
.botonSexy.negro{
background:rgba(0,0,0,.7);
color: #fff;
}
.textAreaSexy.negro{
background:#333;
color:#fff;
text-shadow:2px 2px 5px rgba(255,255,255,.7);
}
Con esto obtendremos como resultado:


Esta mejor ¿no?. Pero podemos ponerlo de mas colores:
.botonSexy.negro{
text-shadow:2px 2px 5px rgba(255,255,255,.7);
color: #fff;
}
.botonSexy.azul{
background:#2daebf;
color: #fff;
}
.botonSexy.verde{
background:#91bd09;
color: #fff;
}
.botonSexy.magenta{
background:#a9014b;
color: #fff;
}
.botonSexy.rojo{
background:#e33100;
color: #fff;
}
.botonSexy.naranja{
background:#ff5c00;
color: #fff;
}
.botonSexy.amarillo{
background:#ffb515;
color: #fff;
}

.textAreaSexy.negro{
background:#333;
color:#fff;
text-shadow:2px 2px 5px rgba(0,0,0,.4);
}
.textAreaSexy.azul{
background:#2daebf;
color:#fff;
text-shadow:2px 2px 5px rgba(0,0,0,.4);
}
.textAreaSexy.verde{
background:#91bd09;
color:#fff;
text-shadow:2px 2px 5px rgba(0,0,0,.4);
}
.textAreaSexy.magenta{
background:#a9014b;
color:#fff;
text-shadow:2px 2px 5px rgba(0,0,0,.4);
}
.textAreaSexy.rojo{
background:#e33100;
color:#fff;
text-shadow:2px 2px 5px rgba(0,0,0,.4);
}
.textAreaSexy.naranja{
background:#ff5c00;
color:#fff;
text-shadow:2px 2px 5px rgba(0,0,0,.4);
}
.textAreaSexy.amarillo{
background:#ffb515;
color:#fff;
text-shadow:2px 2px 5px rgba(0,0,0,.4);
}
Azul:




Verde




Magenta




Rojo




Naranja




Amarillo


Por: Unknown
En Hace 15 años que se publicó
Etiquetas ,
#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

4 comentarios !

1
José GDF dijo...

Precisamente estoy basando mi nuevo diseño en buena parte en CSS3. Lástima que algunos navegadores no lo soporten plenamente todavía, pero todo se andará.

Un saludo.

Hace NaN años
2
Unknown dijo...

José GDF En efecto, Microsoft asegura que IE9 tendrá compatibilidad con CSS3, mientras que Firefox, Opera, Safari y Chrome. Se espera que muy pronto tengan mayor compatibilidad con CSS3!!

Ojalá y no tarden mucho

Hace NaN años
3
●๋•╣ҜΞҜΘ╠●๋• dijo...

Hola santy, ya he implementado un formulario de contacto que pusiste en un post all´´a por el 2008. aunque no muy estético pero bueno...

El caso es, que estuve mirando tu formulario y cuando le das a enviar (al tuyo) te manda a un enlace roto. Yo lo que hice fue en la pagina web donde lo diseñas, pues puse un link a mi portada y punto, sin felicitaciones ni chorradas.

En fin solo era para avisarte de que revises eso, y bueno para preguntarte si queda mucho para mi deseado calendario de enlaces, jeje

Un saludo^^

Hace NaN años
4
Unknown dijo...

●๋•╣ҜΞҜΘ╠●๋• Si en efecto, tenía algo mal configurado. Gracias por el aviso sonrisa

Aún le falta al calendario, solo ten paciencia parpadeo !

Hace NaN años

Dhtml ventanas emergentes sencill... Blogger permite crear pagin... Página Principal
Arriba