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

Estas en: > > CSS3: Sorprendentes botones para formularios

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 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 !

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.

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

●๋•╣ҜΞҜΘ╠●๋• 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^^

Unknown dijo...

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

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


Página Principal
Arriba