Estilo CSS para un botón: Usar <input type = "button> en lugar de <button>

Estoy intentando aplicar un estilo usando <input type="button"> en lugar de solo <button>. Con el código que tengo, el botón se extiende por toda la pantalla . Sólo quiero ser capaz de encajar en el texto que está en el botón Todas las ideasEstilo CSS para un botón: Usar <input type = "button> en lugar de <button>

Véase el jsFiddle Example o continuar con el HTML:.?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<title>WTF</title> 
</head> 
<style type="text/css"> 
.button { 
    color:#08233e; 
    font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif; 
    font-size:70%; 
    padding:14px; 
    background:url(overlay.png) repeat-x center #ffcc00; 
    background-color:rgba(255,204,0,1); 
    border:1px solid #ffcc00; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:10px; 
    border-bottom:1px solid #9f9f9f; 
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    cursor:pointer; 
} 
.button:hover { 
    background-color:rgba(255,204,0,0.8); 
} 
</style> 
<body> 
<div class="button"> 
    <input type="button" value="TELL ME MORE" onClick="document.location.reload(true)"> 
</div> 
</body>

Fuente

2012-06-15 Varun Shetty

que necesita para el estilo de entrada no el div alrededor de ella –

En su .button CSS, intente display:inline-block. Consulte esto JSFiddle

Fuente

2012-06-15 15:23:08 huzzah

¿quieres algo así como eldado

HTML

<div class="button"> 
    <input type="button" value="TELL ME MORE" onClick="document.location.reload(true)"> 
</div>

CSS

.button input[type="button"] { 
    color:#08233e; 
    font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif; 
    font-size:70%; 
    padding:14px; 
    background:url(overlay.png) repeat-x center #ffcc00; 
    background-color:rgba(255,204,0,1); 
    border:1px solid #ffcc00; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:10px; 
    border-bottom:1px solid #9f9f9f; 
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    cursor:pointer; 
    display:block; 
    width:100%; 
} 
.button input[type="button"]:hover { 
    background-color:rgba(255,204,0,0.8); 
}

Fuente

2012-06-15 15:21:24 SVS

Float:left ... Aunque supongo que desea que la entrada a ser de estilo no el div?

.button input{ 
    color:#08233e;float:left; 
    font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif; 
    font-size:70%; 
    padding:14px; 
    background:url(overlay.png) repeat-x center #ffcc00; 
    background-color:rgba(255,204,0,1); 
    border:1px solid #ffcc00; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:10px; 
    border-bottom:1px solid #9f9f9f; 
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    cursor:pointer; 
} 
.button input:hover{ 
    background-color:rgba(255,204,0,0.8); 
}

Fuente

2012-06-15 15:21:53

El problema no es con el botón, el problema es con el div. Como div s son elementos de bloque, de forma predeterminada ocupan todo el ancho de su elemento principal (como regla general, estoy bastante seguro de que hay algunas excepciones si estás jugando con diferentes esquemas de posicionamiento en un documento que lo causaría) ocupar todo el ancho de un elemento superior en la jerarquía).

De todos modos, intente agregar float: left; a las reglas para el selector .button. Eso hará que el div con la clase button quepa alrededor del botón, y le permitirá tener varios div flotados en la misma línea si quisiera más div.button s.

Fuente

2012-06-15 15:21:59 JAB

trate de poner

Display:inline;

En el CSS.

Fuente

2012-06-15 15:22:04 Charlie

¿Realmente desea diseñar el <div>? ¿O quieres diseñar el <input type="button">? Debe utilizar el selector correcto si desea que el último: También

input[type=button] { 
    color:#08233e; 
    font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif; 
    font-size:70%; 
    /* ... other rules ... */ 
    cursor:pointer; 
} 

input[type=button]:hover { 
    background-color:rgba(255,204,0,0.8); 
}

Ver:

Fuente

2012-06-15 15:24:11 Zeta

Estilo CSS para un botón: Usar <input type = "button> en lugar de <button>

Respuesta

Cuestiones relacionadas