web-dev-qa-db-fra.com

Style CSS pour un bouton: utilisation de <input type = "button> au lieu de <button>

J'essaie de styler un bouton en utilisant <input type="button"> au lieu de <button>. Avec le code que j'ai, le bouton s'étend tout au long de l'écran. Je veux juste pouvoir l'adapter au texte qui se trouve dans le bouton. Des idées?

Voir l'exemple jsFiddle ou passez au 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>

cssbutton
26
Varun Shetty

Dans votre CSS .button, essayez display:inline-block. Voir ceci JSFiddle

10
huzzah

Voulez-vous vraiment appeler le <div>? Ou voulez-vous dénommer le <input type="button">? Vous devez utiliser le bon sélecteur si vous voulez ce dernier:

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);
}

Voir également:

62
Zeta

Voulez-vous quelque chose comme le donné violon!

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);
}
6
SVS

Float:left... Bien que je suppose que vous voulez que l'entrée soit stylée pas la 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);
}
1
Mike Hague

Le problème ne vient pas du bouton, mais de la div. Comme les divs sont des éléments de bloc, ils occupent par défaut toute la largeur de leur élément parent (en règle générale; je suis presque sûr qu'il existe des exceptions si vous manipulez différents schémas de positionnement dans un même document qui le ferait occupent toute la largeur d’un élément supérieur de la hiérarchie).

Quoi qu'il en soit, essayez d'ajouter float: left; aux règles du sélecteur .button. Cela entraînera l'ajustement de div avec class button autour du bouton et vous permettrait d'avoir plusieurs div flottants sur la même ligne si vous vouliez plus de div.buttons.

0
JAB

Essayez de mettre

Display:inline;

Dans le CSS.

0
Charlie