Amazing Css3 buttons
Today i will present you amazing css3 buttons, it is very interesting buttons. You can used it to your web page, it is simply to create. I like this buttons, so i want to share with you. Everything you need is to copy html and css code. So lets go to work!!!!
First you need to write this HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Amazing css3 buttons</title>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
</head>
<body>
<div class="container">
<h1>Amazing buttons <span>with CSS3<br></span></h1>
<div class="more">
</div>
<div class="content">
<div class="button-wrapper">
<a href="#" class="a-btn">
<span class="a-btn-slide-text">$29</span>
<img src="images/icons/1.png" alt="Photos" />
<span class="a-btn-text"><small>Available on the Apple</small> App Store</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
<a href="#" class="a-btn">
<span class="a-btn-slide-text">$19</span>
<img src="images/icons/2.png" alt="Maps" />//here put your image
<span class="a-btn-text"><small>Available on the Apple</small> App Store</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
<a href="#" class="a-btn">
<span class="a-btn-slide-text">$24</span>
<img src="images/icons/3.png" alt="Settings" />//here put your image
<span class="a-btn-text"><small>Available on the Apple</small> App Store</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
<a href="#" class="a-btn">
<span class="a-btn-slide-text">$39</span>
<img src="images/icons/4.png" alt="Wireless" />
<span class="a-btn-text"><small>Available on the Apple</small> App Store</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
</div>
</div>
</div>
</body>
</html>
Now you need to create css file with name demo.css
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
input{
border:1px solid #b0b0b0;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
/* General Demo Style */
body{
background:#f9f9f9 url(../images/stucco.png) repeat top left;
color: #333;
font-family: 'Oswald', Arial, sans-serif;
font-size: 13px;
}
.container{
position:relative;
}
a{
color: #fff;
text-decoration: none;
}
.clr{
clear: both;
}
.content{
position:relative;
width:680px;
margin: 0 auto;
}
h1{
margin:0px;
padding:20px 20px 10px 20px;
font-size:34px;
color:#333;
text-shadow:1px 1px 1px #fff;
text-align:left;
font-weight:400;
text-align:center;
}
h1 span{
display:block;
font-size: 14px;
font-family: Georgia, serif;
font-style: italic;
color:#aaa;
padding-top:10px;
}
/* Header Style */
.header{
font-family:'Arial Narrow', Arial, sans-serif;
line-height: 24px;
font-size: 11px;
background: #000;
opacity: 0.9;
text-transform: uppercase;
z-index: 9999;
position: relative;
-moz-box-shadow: 1px 0px 2px #000;
-webkit-box-shadow: 1px 0px 2px #000;
box-shadow: 1px 0px 2px #000;
}
.header a{
padding: 0px 10px;
letter-spacing: 1px;
color: #ddd;
display: block;
float: left;
}
.header a:hover{
color: #fff;
}
.header span.right{
float: right;
}
.header span.right a{
float: none;
display: inline;
}
.more{
position:relative;
clear:both;
font-family:'Arial Narrow', Arial, sans-serif;
text-transform: uppercase;
font-size: 12px;
padding: 5px 0px 10px;
width: 372px;
margin: 0 auto;
}
.more ul{
display:block;
text-align:center;
height: 30px;
}
.more ul li{
display: block;
padding: 4px 2px;
float:left;
}
.more ul li.selected a,
.more ul li.selected a:hover{
background:#aaa;
color:#fff;
text-shadow:none;
}
.more ul li a{
color:#555;
float:left;
background:#fff;
width:auto;
padding: 2px 5px;
-moz-box-shadow:1px 1px 2px #aaa;
-webkit-box-shadow:1px 1px 2px #aaa;
box-shadow:1px 1px 2px #aaa;
}
.more ul li a:hover{
background:#000;
color:#fff;
}
.button-wrapper{
width: 320px;
margin: 0 auto;
padding: 20px 0;
}
.button-wrapper-large{
width:500px;
margin: 0 auto;
padding: 20px 0;
height: 80px;
}
And one more css file style1.css
.a-btn{
background:#a9db80;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#a9db80,0),color-stop(#96c56f,1));
background:-webkit-linear-gradient(top, #a9db80 0%, #96c56f 100%);
background:-moz-linear-gradient(top, #a9db80 0%, #96c56f 100%);
background:-o-linear-gradient(top, #a9db80 0%, #96c56f 100%);
background:linear-gradient(top, #a9db80 0%, #96c56f 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=0 );
padding-left:90px;
padding-right:105px;
height:90px;
display:inline-block;
position:relative;
border:1px solid #80ab5d;
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
float:left;
clear:both;
margin:10px 0px;
overflow:hidden;
-webkit-transition:box-shadow 0.3s ease-in-out;
-moz-transition:box-shadow 0.3s ease-in-out;
-o-transition:box-shadow 0.3s ease-in-out;
transition:box-shadow 0.3s ease-in-out;
}
.a-btn img{
position:absolute;
left:15px;
top:13px;
border:none;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.a-btn .a-btn-slide-text{
position:absolute;
font-size:36px;
top:18px;
left:18px;
color:#6d954e;
opacity:0;
text-shadow:0px 1px 1px rgba(255,255,255,0.4);
-webkit-transition:opacity 0.2s ease-in-out;
-moz-transition:opacity 0.2s ease-in-out;
-o-transition:opacity 0.2s ease-in-out;
transition:opacity 0.2s ease-in-out;
}
.a-btn-text{
padding-top:13px;
display:block;
font-size:30px;
text-shadow:0px -1px 1px #80ab5d;
}
.a-btn-text small{
display:block;
font-size:11px;
letter-spacing:1px;
}
.a-btn-icon-right{
position:absolute;
right:0px;
top:0px;
height:100%;
width:80px;
border-left:1px solid #80ab5d;
-webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
-moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
width:38px;
height:38px;
opacity:0.7;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
position:absolute;
left:50%;
top:50%;
margin:-20px 0px 0px -20px;
border:1px solid rgba(0,0,0,0.5);
background:#4e5c50 url(../images/arrow_down.png) no-repeat center center;
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.a-btn:hover{
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
}
.a-btn:hover img{
-webkit-transform:scale(10);
-moz-transform:scale(10);
-ms-transform:scale(10);
-o-transform:scale(10);
transform:scale(10);
opacity:0;
}
.a-btn:hover .a-btn-slide-text,
.a-btn:hover .a-btn-icon-right span{
opacity:1;
}
.a-btn:active{
position:relative;
top:1px;
background:#80ab5d;
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
border-color:#a9db80;
}
.a-btn:active .a-btn-icon-right span{
-webkit-transform:scale(1.4);
-moz-transform:scale(1.4);
-ms-transform:scale(1.4);
-o-transform:scale(1.4);
transform:scale(1.4);
}
You are now finished your amazing css3 buttons, you can download or create images and put it to your buttons. If you forget how to put images you can see at my older post.
0 comments:
Post a Comment