CSS Styling for a Button Using input type button instead of button

Question

I m trying to style a button using  lt input type  button  gt  instead of just  lt button gt   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    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html gt   lt head gt    lt title gt WTF lt  title gt   lt  head gt   lt style type  text css  gt    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       lt  style gt   lt body gt    lt div class  button  gt     lt input type  button  value  TELL ME MORE  onClick  document location reload true   gt    lt  div gt    lt  body gt

User · Answer

Do you really want to style the  lt div gt   Or do you want to style the  lt input type  button  gt   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       See also    JSFiddle Demo W3C  CSS 3  6 3 Attribute selectors

User · Answer

Try putting  Display inline    In the CSS

User · Answer

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

User · Answer

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

User · Answer

Do you want something like the given fiddle     HTML   lt div class  button  gt       lt input type  button  value  TELL ME MORE  onClick  document location reload true   gt   lt  div gt    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

User · Answer

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

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

Examples related to css

Examples related to button