dic
28
2009
28
2009
CSS // Diseño web
Botones de formulario con bordes redondeados solo Css

En este Post les mostrare como podemos crear botones para nuestros formularios con un estilo de borde redondeado.
Esto nos servirá para poner mas cool nuestra web.
Primero tenemos que descarga estas Imagenes.
Imagen Izquierda

Imagen Izquierda Hover

Imagen Derecha

Imagen Derecha Hover

Este es el codigo del Boton
<button value="submit" class="submitBtn"><span>Submit</span></button>
Y este sería el Código del Css
utton { border:0; cursor:pointer; font-weight:bold; padding:0 20px 0 0; text-align:center; } button span { position:relative; display:block; white-space:nowrap; padding:0 0 0 20px; } /*blue buttons*/ button.submitBtn { background:url(images/btn_blue_right.gif) right no-repeat; font-size:1.3em; } button.submitBtn span { height:50px; line-height:50px; background:url(images/btn_blue_left.gif) left no-repeat; color:#fff; } button.submitBtn:hover { background:url(images/btn_blue_right_hover.gif) right no-repeat; } button.submitBtn:hover span { background:url(images/btn_blue_left_hover.gif) left no-repeat; }
Esto es todo espero que les sea de su agrado este Efecto en Css
Related Posts
2 Comments + Add Comment
Leave a comment
Patrocinador
Siguenos
Suscribete
Correo @zoneartcss.com
Comentarios
- juan manuel en Subdominios con php y .htaccess
- PCHART-Crear gráficas en PHP | Espacio de *M@?!*[lOs KeRoS mUcHo a ToDoS...] en Pchart – Crear gráficas en PHP
- EH en Evitar resize de un textarea con CSS
- KAREN en Envia mensajes de texto gratis a celulares telcel
- Elie Cottage en Ventajas y desventajas de tener un blog gratis

An article by







California Website Design…
Botones de formulario con bordes redondeados solo Css | ZoneArtCSS | Desarrollo Web, Diseño de páginas Web, Aplicaciones Móviles, Notas de Tecnología…
Hay una actualización de este tutorial en
http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/