dic
28
2009

Botones de formulario con bordes redondeados solo Css

botones_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
btn_blue_left
Imagen Izquierda Hover
btn_blue_left_hover

Imagen Derecha
btn_blue_right
Imagen Derecha Hover
btn_blue_right_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

Ver Ejemplo

2 Comments + Add Comment

Leave a comment

Patrocinador

Siguenos

Suscribete

Escribe tu correo:

Recibirás un correo con todos los articulos escritos en ZoneArtCss durante el día.

Correo @zoneartcss.com

Obtén una cuenta de @zoneartcss.com gratuita