Quantcast
Channel: Web Design Depot | Web Design, Development & SEO » Css
Viewing all articles
Browse latest Browse all 3

Styling Submit Button through CSS

0
0

If you have a website, then the site should contain a contact page. A form Submit button is necessary for a “contact us” page of a website. There is a simple way to add the submit button into your website. But if you apply some of the simple tricks you will be able to present your submit button in an impressive way.

I am presenting CSS Techniques to design your button. You can also do this Photoshop. But in that case you have to attach image with your button.

button{

background:#666666 color:white;

border-style: groove;

border-color:#0066A2;

height:50px; width:100px;

font: bold 20px “Times New Roman”, Times, serif;

}

 

 

 

button {
display: block;
width: 130px;
height: 40px;
margin: 0px auto;
color:#003399;
}
button input:hover{
background-position:left top;
background-repeat:no-repeat;
}

 

 

 

button {
color: #663300;
font-size: 140%;
text-transform: uppercase;
box-shadow: 10px 10px 5px #888888;
}

 

 

button{ all 0.218s ease-in 0s;
background-color: #5E94FF;
background-image: -moz-linear-gradient(center top , rgba(226, 226, 226, 0.14), rgba(34, 34, 34, 0.14));
background-position: left bottom;
background-repeat: repeat-x;
border: 1px solid #5E94FF;
border-radius: 2px 2px 2px 2px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
color: #FFFFFF;
display: inline-block;
font-family: “open sans”,arial,sans-serif;
font-size: 13px;
font-weight: 600;
line-height: 1.54;
padding: 8px 12px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}

 

 

 

I have collected these button styles from different resources. You can edit them as per your choice.


Viewing all articles
Browse latest Browse all 3

Latest Images

Trending Articles



Latest Images