Style CSS pour un bouton: Utiliser au lieu de

J'essaie de styliser un bouton en utilisant <input type="button"> au lieu de simplement <button>. Avec le code que j'ai, le bouton s'étend sur tout l'écran. Je veux juste pouvoir l'adapter au texte qu'il est dans le bouton. Des idées?

Voir l'exemple jsFiddle ou continuer sur le 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>

26
demandé sur 0b10011 2012-06-15 19:16:28

6 réponses

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

10
répondu huzzah 2012-06-15 15:23:08

Voulez-vous vraiment styler le <div>? Ou voulez-vous styliser le <input type="button">? Vous devez utiliser le sélecteur correct 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 aussi:

60
répondu Zeta 2012-06-15 15:29:28

Voulez-vous quelque chose comme le 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
répondu SVS 2014-03-07 19:38:31

Float:left... Bien que je présume 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
répondu Mike Hague 2014-03-07 19:38:06

Le problème n'est pas avec le bouton, le problème est avec le div. Comme 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 sûr qu'il y a quelques exceptions si vous jouez avec différents schémas de positionnement dans un document qui le ferait occuper toute la largeur d'un élément supérieur dans la hiérarchie).

Quoi qu'il en soit, essayez d'ajouter float: left; aux règles du sélecteur .button. Cela provoquera le div avec la classe button pour s'adapter autour du bouton, et vous permettra d'avoir plusieurs flottait divs sur la même ligne si vous voulais plus de div.buttons.

0
répondu JAB 2012-06-15 15:21:59

Essayez de mettre 

Display:inline;

Dans le CSS.

0
répondu Charlie 2012-06-15 15:22:04