Demo Download Button Set Example
We often need to have a clean and neat demo and download button in our blogging site, I had searched a lot but found none, so here I am coming up with this cool set of buttons which you can happily use for free in your website.
PS :: Use the demo and download button to see it in action / download to use. There are different color buttion which you may experiment to match your website’s look.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo Download
Button for blogs</title>
<style
type="text/css">
#downloadDemo {
width: 465px;
height:
70px;
margin: 25px auto 40px;
position:
relative;
}
#downloadDemo.both a {
float: left;
margin-left:
20px;
}
#downloadDemo a {
border: none;
border-radius:
7px;
box-shadow: 0 1px 1px #CCC;
}
a.greenButton {
width:
202px;
height: 68px;
display: block;
text-indent: -9999px;
outline:
none;
}
a.greenButton {
background: url(‘https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVy2nXVXHJzo-jsYmYS_N2LRbd0keVZkUVD5sTmhk9O3zf33HdRE5r287zewtdASL0mJ-59SP8Ds-gCir3BpVQh47TOlrBm8S0QbujKbwstSxbLNZ9PYAVD0uMWTCf0X6ILQPYSWNkHURm/w404-h415-no/demo_download_set.jpg’)
no-repeat;
}
a.greenButton.demo {
background-position: left
top;
}
a.greenButton.demo:hover {
background-position: left
bottom;
}
a.greenButton.download {
background-position: right
top;
}
a.greenButton.download:hover {
background-position: right
bottom;
}
.line {
height: 3px;
width: 100%;
bottom:
-30px;
position: absolute;
background: url('line.png') no-repeat center
top;
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<div id="downloadDemo"
class="both">
<a href="http://longluxi.blogspot.com/"
class="greenButton demo" target="_blank">Demo</a>
<a href="http://longluxi.blogspot.com/"
class="greenButton download">Download</a>
<div
class="line"></div>
</div>
</body>
</html>
Đăng nhận xét Blogger Facebook