E Online Support - Free Software Download
How to get stylish submit button using css?
I want to make stylish submit button using css.
Shruti
Answer
1

Cascading Style Sheets level 3 allow us to design various HTML elements in elegant fashion, submit button is one of them.
<!DOCTYPE html>
<html>
<head>
<title>Design Submit Button - Demo Preview</title>
<meta content="noindex, nofollow" name="robots">
<!-- Include CSS File Here-->
<link href="css/submit.css" rel="stylesheet">
</head>
<body>
<div id="main">
<div id="first">
<h1>Stylish Designs for Submit Button</h1>
<form id="myform" name="myform">
<h3>Type 1</h3>
<div class="btn">
<input class="button1" type="button" value="Submit">
</div>
<div class="btn">
<input class="button2" type="button" value="Submit">
</div>
<form>
</div>
</div>
</body>
</html>


CSS File: submit.css


@import "http://fonts.googleapis.com/css?family=Arvo";
/* Above line is used for online Google font */
hr{
border:0;
border-top:1px solid #ccc;
margin-bottom:-10px
}
div#main{
width:828px;
height:764px;
margin:0 auto;
font-family:'Arvo',serif
}
div#first{
width:350px;
height:740px;
padding:0 25px 20px;
float:left;
text-align:center
}
.btn{
width:260px;
height:50px;
margin-left:45px
}
.button1{
width:250px;
height:45px;
border:none;
outline:none;
box-shadow:0 3px 2px 0 #2c80a2;
color:#fff;
font-size:14px;
text-shadow:0 1px rgba(0,0,0,0.4);
background-color:#3fb8e8;
font-weight:700;
background-image:url(../images/1.png);
background-repeat:no-repeat;
background-position:200px
}
.button1:hover{
background-color:#1baae3;
cursor:pointer
}
.button1:active{
padding-top:2px;
box-shadow:none
}
.button2{
width:250px;
height:45px;
border:none;
outline:none;
color:#fff;
margin-top:20px;
font-size:14px;
background-color:#ff6a80;
text-shadow:0 1px rgba(0,0,0,0.4);
box-shadow:0 3px 2px 0 #ff3755;
font-weight:700;
background-image:url(../images/1.png);
background-repeat:no-repeat;
background-position:200px
}
.button2:hover{
background-color:#ff566f;
cursor:pointer
}
.button2:active{
padding-top:2px;
box-shadow:none
}
Question*:
Description*:
Script:
Related To:
 PHP    HTML    CSS    JAVASCRIPT    JQUERY   
 AJAX    WINDOWS    GAMES    DRIVERS    MAC   
 LINUX    MOBILE    GADGETS   
Security Code:
4527
Enter Security Code:
 
Facebook   Linkedin   Skype   Twitter