Creating A Sexy Submit Button With CSS

The default button is rather boring.



This markup code produces the above image:
<button>Submit</button>

Rather than replacing with an image, let's use CSS. Reduce load on the server and decrease page load time.

By adding the below code to the style.css file:
button{
color:#768B1F;
text-align:center;
font:2.4em Trebuchet MS, sans-serif;
padding: 22px!important;
cursor:pointer
background-color:#E5ECAB;
background:repeat-x center #E5ECAB;
border:3px solid #FC6700;
width:87%;
padding: 13px 15px;
margin:10px 10px 10px 10px;
display: inline-block;
}
button:hover{background-color:rgba(252,103,0,0.8);}

Anywhere that uses:
[code]<button>Submit</button>[/code]

Will now look like this:

Sign In or Register to comment.