JSFiddle - React, Tailwind, and code Playground
by Kocsten
HTML
<!DOCTYPE html>
<html>
<head>
<title>Design Submit Button - Demo Preview</title>
<meta content="noindex, nofollow" name="robots">
<!-- Include CSS File Here-->
<link href="css/design_submit_button.css" rel="stylesheet">
</head>
<body>
<div id="main">
<div id="first">
<h1>ZorNet: Создание сайта на uCoz</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>
<h3>Type 2</h3>
<div class="btn1">
<input class="button3" type="button" value="Submit">
</div>
<div class="btn1">
<input class="button4" type="button" value="Submit">
</div>
<h3>Type 3</h3>
<div class="btn">
<input class="button5" type="button" value="Submit">
</div>
<div class="btn">
<input class="button6" type="button" value="Submit">
</div>
</form>
</div>
</div>
</body>
</html>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
}
.btn1{
width:260px;
height:85px;
margin-left:42px
}
.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
}
.button3{
color:#fff;
padding:20px 100px;
border:none;
outline:none;
font-size:20px;
text-shadow:-2px 2px 0 rgba(0,0,0,0.2);
font-weight:700;
transition:all .1s linear;
background:linear-gradient(to bottom,#bced7f,#99e43c);
box-shadow:-1px 0 1px #80d01d,0 1px 1px #80d01d,-2px 1px 1px #80d01d,-1px 2px 1px #80d01d,-3px 2px 1px #80d01d,-2px 3px 1px #80d01d,-4px 3px 1px #80d01d,-3px 4px 1px #80d01d,-5px 4px 1px #80d01d,-4px 5px 1px #72ba1a,-6px 5px 1px #72ba1a
}
.button3:active{
box-shadow:none;
-moz-transform:translate3d(-6px,6px,0);
-ms-transform:translate3d(-6px,6px,0);
-webkit-transform:translate3d(-6px,6px,0);
transform:translate3d(-6px,6px,0)
}
.button4{
color:#fff;
padding:20px...