Botones de formulario con bordes redondeados solo Css

Obtén una cuenta de @zoneartcss.com gratuita

Registrarse

Ver correo

Dic 28

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

Compartir

votar

Posted in CSS, Diseño web. on Lunes, Diciembre 28th, 2009 by miguelortega Tags: botones css, css botones, estilo de botones, formularios con estilo, miguel ortega

1 Comment

Ricardo Escobar on Agosto 19th, 2010

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/

Leave a Reply

ZoneArtCSS | Tu lugar: Del Arte CSS

Encuesta
¿El hosting en México es?
- Excelente
- Bueno
- Regular
- Malo
- Muy MALO!!
View Results
Loading ...
- Polls Archive
Buscador
Suscribete

Escribe tu correo:

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

Lo Último

Operadores lógicos en PHPOperadores lógicos en PHP DeviantART - Diseños onlineDeviantART - Diseños online Top 10 de Lenguajes de Programación Agosto 2010Top 10 de Lenguajes de Programación Agosto 2010 Nuevo Filezilla 3.3.4 disponible Nuevo Filezilla 3.3.4 disponible Consultas Básicas de SQLConsultas Básicas de SQL

Categorías
Twitter
- RT @dmedina: yeah! mi esposa fue a ver si por fin ya podemos sacar el iPhone 4 :D mas bien la mande jajaja// eso es!!! asi se hace :P 11:09:50 AM Agosto 31, 2010 desde TweetDeck
- RT @lizpalacios5: @zoneartcss pide incapacidad /// ajaj awech.. 09:38:57 AM Agosto 31, 2010 desde TweetDeck
- @lizpalacios5 sip de la fregada me mueeeeeeerrrrrrrrrrrrrrroooooooooooo 09:19:22 AM Agosto 31, 2010 desde TweetDeck en respuesta a lizpalacios5
- hola amigos buen dia, aquí con una gripa de la fregada, saludos 09:11:55 AM Agosto 31, 2010 desde TweetDeck
Enlaces

Alterblogs Posts

© Copyright ZoneArtCSS | Tu lugar: Del Arte CSS. All rights reserved.
Designed by FTL Wordpress Themes brought to you by Smashing Magazine