Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

button

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> 

like image 589
Varun Shetty Avatar asked Jun 15 '12 15:06

Varun Shetty


People also ask

Should I use button or input type button?

The difference is that <button> can have content, whereas <input> cannot (it is a null element). While the button-text of an <input> can be specified, you cannot add markup to the text or insert a picture.

Should I use input or button for Submit?

input suggests that the control is editable, or can be edited by the user; button is far more explicit in terms of the purpose it serves. Easier to style in CSS; as mentioned above, FIrefox and IE have quirks in which input[type="submit"] do not display correctly in some cases.


2 Answers

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

See also:

  • JSFiddle Demo
  • W3C: CSS 3: 6.3 Attribute selectors
like image 173
Zeta Avatar answered Sep 28 '22 09:09

Zeta


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

like image 28
huzzah Avatar answered Sep 28 '22 10:09

huzzah