CSS Styling for a Button: Using <input type="button> instead of <button>

Question

I'm trying to style a button using <input type="button"> instead of just <button>. With the code I have, the button extends all the way across the screen. I just want to be able to fit it to the text that it's in the button. Any ideas?

See the jsFiddle Example or continue on to the 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>

you need to style input not the div around it

khaled_webdev
– khaled_webdev

2012-06-15 15:26:22 +00:00
Commented Jun 15, 2012 at 15:26 — khaled_webdev
– khaled_webdev, Commented Jun 15, 2012 at 15:26

Zeta · Accepted Answer · 2012-06-15 15:29:28Z

66

Do you really want to style the <div>? Or do you want to style the <input type="button">? You should use the correct selector if you want the latter:

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

Comments

huzzah · Accepted Answer · 2012-06-15 15:23:08Z

9

In your .button CSS, try display:inline-block. See this JSFiddle

answered Jun 15, 2012 at 15:23

huzzah

1,8052 gold badges23 silver badges41 bronze badges

Comments

Michel Ayres · Accepted Answer · 2014-03-07 19:38:31Z

Do you want something like the given fiddle!

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

Michel Ayres · Accepted Answer · 2014-03-07 19:38:06Z

1

Float:left... Although I presume you want the input to be styled not the 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);
}

edited Mar 7, 2014 at 19:38

Michel Ayres

6,02511 gold badges67 silver badges97 bronze badges

answered Jun 15, 2012 at 15:21

Mike Hague

2531 gold badge3 silver badges15 bronze badges

Comments

JAB · Accepted Answer · 2012-06-15 15:21:59Z

0

The issue isn't with the button, the issue is with the div. As divs are block elements, they default to occupying the full width of their parent element (as a general rule; I'm pretty sure there are some exceptions if you're messing around with different positioning schemes in one document that would cause it to occupy the full width of a higher element in the hierarchy).

Anyway, try adding float: left; to the rules for the .button selector. That will cause the div with class button to fit around the button, and would allow you to have multiple floated divs on the same line if you wanted more div.buttons.

answered Jun 15, 2012 at 15:21

JAB

21.2k6 gold badges73 silver badges80 bronze badges

Comments

Charlie · Accepted Answer · 2012-06-15 15:22:04Z

0

Try putting

Display:inline;

In the CSS.

answered Jun 15, 2012 at 15:22

Charlie

11.7k19 gold badges88 silver badges141 bronze badges

Collectives™ on Stack Overflow

CSS Styling for a Button: Using <input type="button> instead of <button>

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related