HTML/CSS: Styling form buttons

source: http://jsfiddle.net/2RYyD/

Great example there but if you’re styling the button which is a form submit button, remember to change the button type to “submit” instead or the variables won’t get posted.

<div class=”button”>
<input type=”button” value=”TELL ME MORE” onClick=”document.location.reload(true)”>
</div>

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

This entry was posted in CSS and tagged , . Bookmark the permalink.