HTML - Diseño de un botón de formulario

Question

Estoy tratando de darle estilo a mi botón de envío para mi formulario. Estaba buscando en la etiqueta 'botón' y agregando mi estilo CSS, pero el botón todavía tiene un estilo predeterminado horrible.

Esto es lo que tengo hasta ahora:

<button name="visit_return_button" id="visit_return_button" type="submit" class="visit_return_button"> 
Increase 
</button> 

Mi estilo CSS está trabajando, sino también consigo un mirando el color del borde y el fondo desagradable. También busqué en JavaScript, pero no me gusta la idea de que no todos los navegadores tengan JS activo.

A continuación se muestra una imagen del botón, el de arriba es lo que parece, la de abajo es lo que su supone que debe ser similar:

Aquí es mi CSS:

#visit_return_button{ 
    width:90px; 
    height:30px; 
    position:absolute; 
    background-image: url(image/build_button.png); 
    background-repeat: no-repeat; 
    /*font-family: Tahoma, Geneva, sans-serif;*/ 
    font-size: 14px; 
    font-weight: normal; 
    color: #FFF; 
    text-align: center; 
    /*margin: auto;*/ 
    padding-top: 10px; 
    margin-top:-20px; 
} 

agradecería cualquier ayuda, gracias

Answer 1

Usted puede hacer fácilmente su botón través de CSS3 border-Radio: -

CSS

#visit_return_button{ 
    background-color:#9C8C42; 
    border: 2px solid #91782c; 
    color: #FFF; 
    text-align: center; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    padding: 10px; 
    } 

HTML

<button id="visit_return_button" type="submit">Increase</button> 

de demostración: - http://jsfiddle.net/VY8xs/3/

Answer 2

Las bibliotecas son a menudo una buena solución para los botones de estilo consistente a través de múltiples tipos de navegador. Consulte jQuery buttons, YUI Buttons, y hay muchos others también.

Answer 3

o bien tratar de ocultar el border como border:0; y ajustar el fondo para adaptarse a sus necesidades o no utilizar una imagen de fondo y tratar de hacerlo con CSS puro y border-radius que parece ser una mejor idea. Ver http://jsfiddle.net/qVkRs/1/

Answer 4

Primero quiere hacer un estilo global para sus botones, de lo contrario tendrá que aplicar esos estilos a cada identificador de botón que será un montón de CSS repetido. Luego cambie sus estilos de fondo para que sea como a continuación. Después de eso, puede ajustar el resto para que parezca correcto.

input[type="button"], input[type="submit"], button 
{ 
    background: none; 
    background-image: url(image/build_button.png); 
    background-position: center center; 
    background-repeat: no-repeat; 
    border: 0px; 
    /* add the rest of your attributes here */ 
} 

Esto aplicará estos estilos a todos los botones en todo el sitio. Si necesita aplicar estilos adicionales a un botón específico o anular alguno de los anteriores, utilice el ID y colóquelo debajo del código anterior. También deshacerte del atributo class = "" en tu etiqueta de botón, no lo necesitas y no lo usamos por lo que podemos ver. Espero que esto ayude. ¡Buena suerte!

Answer 5

Creo que está intentando eliminar el borde. Esto se puede hacer con:

border:none; 

he tomado la libertad de poner en orden la CSS original aquí:

#visit_return_button{ 
    width:90px; 
    height:30px; 
    font:14px Tahoma, Geneva, sans-serif; 
    background:url(image/build_button.png) no-repeat; 
    color:#fff; 
    text-align:center; 
    border:none; /* removal of border */ 
} 

Además, si se trata de una forma, es mejor utilizar:

<input type="button" value="Increase"/> 

para botones; y:

<input type="submit" value="Increase"/> 

para botones SUBMIT específicamente.

Answer 6

Sólo ocultar los bordes del botón y establecer el color de fondo

background:#ffffff url('your_image.png'); 

Answer 7

aquí está mi solución; He probado con todos los principales navegadores y funciona bien, incluso sin la imagen de fondo. Excepto IE8 no hace esquinas redondeadas.

http://jsfiddle.net/uSphG/3/

he añadido algunas propiedades de estilo, por si acaso. Algunas características tienen diferentes valores predeterminados en diferentes navegadores.

button::-moz-focus-inner { 
padding: 0 !important; 
border: none !important; 
} 

#visit_return_button{ 
display:inline-block; 
width:90px; 
padding:0; margin:0; outline:0; 
background:#9B8C47; 
background-image: url(image/build_button.png); 
background-repeat: no-repeat; 
/*font-family: Tahoma, Geneva, sans-serif;*/ 
border:1px solid #866517; 
-moz-border-radius:0.4em; 
border-radius:0.4em; 
font-size: 14px; line-height:24px; 
font-weight: normal; 
color: #FFF; 
text-align: center; 
/*margin: auto;*/ 
}