KOLEKSI TOMBOL DEMO DAN DOWNLOUD CSS

<style> .button { position: relative; color: rgba(255,255,255,1); text-decoration: none; background-color: rgba(219,87,5,1); font-family: 'Yanone Kaffeesatz'; font-weight: 700; font-size: 2em; display: block; padding: 4px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7); -moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7); box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7); margin: 20px auto; width: 160px; text-align: center; -webkit-transition: all .1s ease; -moz-transition: all .1s ease; -ms-transition: all .1s ease; -o-transition: all .1s ease; transition: all .1s ease; } .button:active { -webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9); -moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9); box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9); position: relative; top: 6px; } </style> <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'> <a class="button" href="#">View Demo </a> <a class="button" href="#">Download</a> --------------------- <style> /* Button */ .button { background-color: #222; background-image: -webkit-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0)); background-image: -moz-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0)); background-image: -ms-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0)); background-image: -o-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0)); background-image: linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0)); border: 1px solid #111; color: grey; cursor: pointer; display: inline-block; font: bold 14px/10px sans-serif; margin: 20px; padding: 10px 15px; position: relative; text-decoration: none; text-shadow: 0 -1px 1px hsla(0,0%,0%,.8); vertical-align: top; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 4px hsla(0,0%,0%,.4), inset 0 1px 0 hsla(0,0%,100%,.2); -moz-box-shadow: 0 1px 4px hsla(0,0%,0%,.4), inset 0 1px 0 hsla(0,0%,100%,.2); box-shadow: 0 1px 4px hsla(0,0%,0%,.4), inset 0 1px 0 hsla(0,0%,100%,.2); } .button:hover, .button:focus { background-color: #242424; color: #f6f6f6; -webkit-box-shadow: 0 1px 4px hsla(0,0%,0%,.4), inset 0 1px 0 hsla(0,0%,100%,.2); -moz-box-shadow: 0 1px 4px hsla(0,0%,0%,.4), inset 0 1px 0 hsla(0,0%,100%,.2); box-shadow: 0 1px 4px hsla(0,0%,0%,.4), inset 0 1px 0 hsla(0,0%,100%,.2); } .button:after { background-image: -webkit-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0)); background-image: -moz-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0)); background-image: -ms-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0)); background-image: -o-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0)); background-image: linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0)); background-position: 50% 0%; background-size: 200% 200%; content: ''; display: none; height: 1px; left: 0; position: absolute; right: 0; top: 0; } .button:hover:after, .button:focus:after { display: block; } .button:before { background: #363636; bottom: -8px; content: ''; left: -8px; position: absolute; right: -8px; top: -8px; z-index: -1; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 1px 1px hsla(0,0%,100%,.3), inset 0 1px 1px hsla(0,0%,0%,.4), inset 0 0 5px hsla(0,0%,0%,.2); -moz-box-shadow: 0 1px 1px hsla(0,0%,100%,.3), inset 0 1px 1px hsla(0,0%,0%,.4), inset 0 0 5px hsla(0,0%,0%,.2); box-shadow: 0 1px 1px hsla(0,0%,100%,.3), inset 0 1px 1px hsla(0,0%,0%,.4), inset 0 0 5px hsla(0,0%,0%,.2); } .button:active { background-color: #202020; color: #b6b6b6; padding: 11px 15px 9px; -webkit-box-shadow: 0 1px 0 hsla(0,0%,100%,.1), inset 0 1px 4px hsla(0,0%,0%,.8); -moz-box-shadow: 0 1px 0 hsla(0,0%,100%,.1), inset 0 1px 4px hsla(0,0%,0%,.8); box-shadow: 0 1px 0 hsla(0,0%,100%,.1), inset 0 1px 4px hsla(0,0%,0%,.8); } .button:active:after { display: block; left: 1px; opacity: .5; right: 1px; top: 31px; } </style> <a class="button" href="#">DOWNLOAD</a> <a class="button" href="#">DEMO LIVE</a> ----------------------------------------- <style> .button:link { margin: 30px 30px 0 30px; display: inline-block; padding: 15px 50px; -moz-border-radius: 4px / 3px; -webkit-border-radius: 4px / 3px; border-radius: 4px / 3px; /* border radius */ -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; /* prevents bg color from leaking outside the border */ background-color: rgba(64,187,217,.12); /* layer fill content */ box-shadow: inset 0 1px 0 rgba(55,255,255,.21), inset 0 1px 35px rgba(64,187,217,.34), 0 2px 3px rgba(0,0,0,.45); /* drop shadow, outer glow and inner shadow */ } .button:hover { margin: 30px 30px 0 30px; display: inline-block; padding: 15px 50px; -moz-border-radius: 4px / 3px; -webkit-border-radius: 4px / 3px; border-radius: 4px / 3px; /* border radius */ -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; /* prevents bg color from leaking outside the border */ background-color: rgba(164,187,217,.15); /* layer fill content */ box-shadow: inset 0 1px 0 rgba(255,255,255,.21), inset 0 1px 35px rgba(164,187,217,.34), 0 2px 3px rgba(0,0,0,.45); /* drop shadow, outer glow and inner shadow */ } .button:active { margin: 30px 30px 0 30px; display: inline-block; padding: 15px 50px; -moz-border-radius: 4px / 3px; -webkit-border-radius: 4px / 3px; border-radius: 4px / 3px; /* border radius */ -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; /* prevents bg color from leaking outside the border */ background-color: rgba(164,187,17,.12); /* layer fill content */ box-shadow: 0 1px 0 rgba(155,255,255,.21), 0 1px 15px rgba(64,187,217,.34), inset 0 2px 3px rgba(0,0,0,.45); /* drop shadow, outer glow and inner shadow */ } .button:link,.button:visited,.button:hover, a:active { color: #3A34A3; font-family:georgia; font-weight: 700; text-transform: uppercase; font-size:.75em; text-decoration: none; text-shadow: 0 1px #292929; } </style> <a class="button" href="#">DOWNLOAD</a> <a class="button" href="#">DEMO LIVE</a> --------------------------------------------- <style> .push_button { position: relative; width:220px; height:40px; text-align:center; color:#FFF; text-decoration:none; line-height:43px; font-family:'Oswald', Helvetica; display: block; margin: 30px; } .push_button:before { background:#f0f0f0; background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0)); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; -moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF; position: absolute; content: ""; left: -6px; right: -6px; top: -6px; bottom: -10px; z-index: -1; } .push_button:active { -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset; top:5px; } .push_button:active:before{ top: -11px; bottom: -5px; content: ""; } .red { text-shadow:-1px -1px 0 #A84155; background: #D25068; border:1px solid #D25068; background-image:-webkit-linear-gradient(top, #F66C7B, #D25068); background-image:-moz-linear-gradient(top, #F66C7B, #D25068); background-image:-ms-linear-gradient(top, #F66C7B, #D25068); background-image:-o-linear-gradient(top, #F66C7B, #D25068); background-image:linear-gradient(to bottom, #F66C7B, #D25068); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5); -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5); box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #AD4257, 0 4px 2px rgba(0, 0, 0, .5); } .red:hover { background: #F66C7B; background-image:-webkit-linear-gradient(top, #D25068, #F66C7B); background-image:-moz-linear-gradient(top, #D25068, #F66C7B); background-image:-ms-linear-gradient(top, #D25068, #F66C7B); background-image:-o-linear-gradient(top, #D25068, #F66C7B); background-image:linear-gradient(top, #D25068, #F66C7B); } .blue { text-shadow:-1px -1px 0 #2C7982; background: #3EACBA; border:1px solid #379AA4; background-image:-webkit-linear-gradient(top, #48C6D4, #3EACBA); background-image:-moz-linear-gradient(top, #48C6D4, #3EACBA); background-image:-ms-linear-gradient(top, #48C6D4, #3EACBA); background-image:-o-linear-gradient(top, #48C6D4, #3EACBA); background-image:linear-gradient(top, #48C6D4, #3EACBA); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5); -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5); box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5); } .blue:hover { background: #48C6D4; background-image:-webkit-linear-gradient(top, #3EACBA, #48C6D4); background-image:-moz-linear-gradient(top, #3EACBA, #48C6D4); background-image:-ms-linear-gradient(top, #3EACBA, #48C6D4); background-image:-o-linear-gradient(top, #3EACBA, #48C6D4); background-image:linear-gradient(top, #3EACBA, #48C6D4); } </style> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> <a href="#" class="push_button red">View Demo</a> <a href="#" class="push_button blue">Download</a> ------------------------------------------ <style> .button { width: 200px; margin: 50px auto; } .button a { display: block; height: 50px; width: 200px; /*TYPE*/ color: white; font: 17px/50px Helvetica, Verdana, sans-serif; text-decoration: none; text-align: center; text-transform: uppercase; /*GRADIENT*/ background: #00b7ea; /* Old browsers */ background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */ background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */ } .button a, p { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); box-shadow: 2px 2px 8px rgba(0,0,0,0.2); } p { background: #222; display: block; height: 40px; width: 180px; margin: -50px 0 0 10px; /*TYPE*/ text-align: center; font: 12px/45px Helvetica, Verdana, sans-serif; color: #fff; /*POSITION*/ position: absolute; z-index: -1; /*TRANSITION*/ -webkit-transition: margin 0.5s ease; -moz-transition: margin 0.5s ease; -o-transition: margin 0.5s ease; -ms-transition: margin 0.5s ease; transition: margin 0.5s ease; } /* HOVER ================================================== */ .button:hover .bottom { margin: -10px 0 0 10px } .button:hover .top { margin: -80px 0 0 10px; line-height: 35px; } /* ACTIVE ================================================== */ .button a:active { background: #00b7ea; /* Old browsers */ background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* IE10+ */ background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */ } .button:active .bottom { margin: -20px 0 0 10px } .button:active .top { margin: -70px 0 0 10px } </style> <div class="button"> <a href="#">View Demo</a> </div> <div class="button"> <a href="#">Download</a> <p class="top">click to download</p> <p class="bottom">file 2.3MB .zip</p> </div> ------------------------------------------- <style> .button { -moz-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px; -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); background:scroll 0 0 #222222; border-bottom:1px solid rgba(0, 0, 0, 0.25); color:#FFFFFF !important; cursor:pointer; font-weight:bold; line-height:1; overflow:visible; font-size:17px; padding:8px 19px 9px; position:relative; text-decoration:none; text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25); width:auto; margin: 10px; } .demobutton { background-color:#999999; text-align:center; width:100px; } .demobutton:hover { background-color:#EB7D05; } .downloadbutton { background-color:#999999; text-align:center; width:100px; } .downloadbutton:hover { background-color:#00AC00; } .button:hover { -moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); -webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); } </style> <a class="button downloadbutton" href="#" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Download</span></a> <a class="demobutton button" href="#" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Live Demo</span></a> ----------------------------------------- <style> .button1 { display: block; font: bold 16px Arial; letter-spacing:; text-decoration: none; margin: 20px auto; padding: 20px 30px 20px 25px; width: 170px; border-top-left-radius: 10px 50px; border-bottom-left-radius: 10px 50px; border-top-right-radius: 10px 50px; border-bottom-right-radius: 10px 50px; -moz-border-radius-topleft: 10px 50px; -moz-border-radius-topright: 10px 50px; -moz-border-radius-bottomright: 10px 50px; -moz-border-radius-bottomleft: 10px 50px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;} .button1:hover { -moz-border-radius-topleft: 30px 50px; -moz-border-radius-topright: 30px 50px; -moz-border-radius-bottomright: 30px 50px; -moz-border-radius-bottomleft: 30px 50px; border-top-left-radius: 30px 50px; border-bottom-left-radius: 30px 50px; border-top-right-radius: 30px 50px; border-bottom-right-radius: 30px 50px;} .button1 span { display: block; margin: 2px 0 0; font: oblique bold 11px verdana;} .button2 { text-decoration: none; font: bold 13px Arial; display: block; margin: 20px auto; padding: 6px 14px; -moz-border-radius: 15px; border-radius: 15px; width: 100px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;} .button2:hover { -moz-border-radius: 5px; border-radius: 5px;} .blue { color: #fff; background: #48C9FF; background: -webkit-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%); background: -moz-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%); background: -ms-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%); background: -o-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%); background: linear-gradient(to bottom, #48C9FF 0%, #2EA8E5 100%); text-shadow: #29a3cc 0 1px 3px; -webkit-box-shadow: inset 0 1px 0 #38bdf4, inset 0 2px 0 #7bdeff, 0 1px 3px #777, 0 0px 1px #ccc; -moz-box-shadow: inset 0 1px 0 #38bdf4, inset 0 2px 0 #7bdeff, 0 1px 3px #777, 0 0px 1px #ccc; box-shadow: inset 0 1px 0 #38bdf4, inset 0 2px 0 #7bdeff, 0 1px 3px #777, 0 0px 1px #ccc;} .blue span { color: #217aa6; text-shadow: #78d2f0 0 1px 0;}? </style> <a href="#" class="button1 blue"> Download file here <span>size 1.3 mb zip file</span> </a> <a href="#" class="button2 blue"> View Demo >> </a>