Botones de formulario con bordes redondeados solo Css

miguelortega — Mon, 28 Dec 2009 09:25:37 +0000

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

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

Ver Ejemplo

ZoneArtCSS | Desarrollo Web, Diseño de páginas Web, Aplicaciones Móviles, Notas de Tecnología » formularios con estilo

Botones de formulario con bordes redondeados solo Css