Blogger CSS USB Tarzı Download Butonları

CSS ile USB şekli verilmiş codepen yapımı gayet başarılı butonu kullanmanız tavsiyemizdir önizlemesini hemen alt kısımda bulabilirsiniz.
Blogger hesabınıza eklemek için;
Kumanda Paneli> Şablon> HTML Düzenle yi takip ediyoruz.
Ctrl+F tuşları ile ]]></b:skin> kodunu bulun ve hemen üst kısmına altta ki CSS kodlarını ekleyin.

CSS Kodları

/* Font Awesome Icons<br /> ------------------ */<br /> @import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");<br /> <br /> /* Layout styles<br /> ******************/<br /> <br /> .wrapper {<br /> font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;<br /> width: 700px;<br /> margin: 40px auto;<br /> text-align: center;<br /> }<br /> .intro {<br /> margin-bottom: 20px;<br /> }<br /> .outro {<br /> margin-top: 40px;<br /> }<br /> <br /> /* USB drive base styles<br /> ******************/<br /> .usb-drive {<br /> display: block;<br /> float: left;<br /> width: 246px; /* Open size plus casing margin */<br /> <br /> margin: 25px auto;<br /> text-align: left;<br /> cursor: pointer;<br /> /* Stop text from being highlighted */<br /> -webkit-user-select: none;<br /> -moz-user-select: none;<br /> -ms-user-select: none;<br /> -o-user-select: none;<br /> user-select: none;<br /> <br /> }<br /> .usb-drive .casing,<br /> .usb-drive .cap {<br /> color: #0378a9;<br /> background-color: #04aef4;<br /> border-top: 1px solid #04aef4;<br /> border-bottom: 1px solid #16b8fb;<br /> -webkit-font-smoothing: antialiased;<br /> -webkit-box-shadow: 0 5px 0 #026690 , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);<br /> -moz-box-shadow: 0 5px 0 #026690 , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);<br /> box-shadow: 0 5px 0 #026690 , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);<br /> background-color: #1eade9;<br /> background-image: -moz-linear-gradient(top, #2fc0fc, #0391cc);<br /> background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2fc0fc), to(#0391cc));<br /> background-image: -webkit-linear-gradient(top, #2fc0fc, #0391cc);<br /> background-image: -o-linear-gradient(top, #2fc0fc, #0391cc);<br /> background-image: linear-gradient(to bottom, #2fc0fc, #0391cc);<br /> background-repeat: repeat-x;<br /> }<br /> .usb-drive > div {<br /> float: left;<br /> height: 50px;<br /> }<br /> .usb-drive .casing,<br /> .usb-drive .cap {<br /> line-height: 50px;<br /> text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.65), 0 1px 1px rgba(255, 255, 255, 0.35);<br /> }<br /> .usb-drive .casing {<br /> width: 95px;<br /> margin-left: 36px;<br /> /* Offset by width of connector for centering */<br /> padding-left: 15px;<br /> padding-right: 10px;<br /> border-radius: 25px 0 0 25px;<br /> font-size: 16px;<br /> font-weight: bold;<br /> text-align: center;<br /> }<br /> .usb-drive .connector {<br /> width: 0;<br /> position: relative;<br /> overflow: hidden;<br /> -webkit-transition: width 100ms ease-in-out;<br /> -moz-transition: width 100ms ease-in-out;<br /> -o-transition: width 100ms ease-in-out;<br /> transition: width 100ms ease-in-out;<br /> }<br /> .usb-drive .connector .inner {<br /> margin-top: 12px;<br /> width: 30px;<br /> height: 30px;<br /> -webkit-border-radius: 0 2px 2px 0;<br /> -moz-border-radius: 0 2px 2px 0;<br /> border-radius: 0 2px 2px 0;<br /> background-color: #afafaf;<br /> background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#999999), color-stop(90%, #bfbfbf), to(#6f6f6f));<br /> background-image: -webkit-linear-gradient(#999999, #bfbfbf 90%, #6f6f6f);<br /> background-image: -moz-linear-gradient(top, #999999, #bfbfbf 90%, #6f6f6f);<br /> background-image: -o-linear-gradient(#999999, #bfbfbf 90%, #6f6f6f);<br /> background-image: linear-gradient(#999999, #bfbfbf 90%, #6f6f6f);<br /> background-repeat: no-repeat;<br /> -webkit-box-shadow: inset 3px 0 3px rgba(0,0,0,0.15), 0 5px 0 #3b3b3b , inset 0 2px 1px rgba(255, 255, 255, 0.45), 0 5px 10px rgba(0, 0, 0, 0.65);<br /> -moz-box-shadow: inset 3px 0 3px rgba(0,0,0,0.15), 0 5px 0 #3b3b3b , inset 0 2px 1px rgba(255, 255, 255, 0.45), 0 5px 10px rgba(0, 0, 0, 0.65);<br /> box-shadow: inset 3px 0 3px rgba(0,0,0,0.15), 0 5px 0 #3b3b3b , inset 0 2px 1px rgba(255, 255, 255, 0.45), 0 5px 10px rgba(0, 0, 0, 0.65);<br /> }<br /> .usb-drive .connector .inner span {<br /> position: absolute;<br /> width: 5px;<br /> height: 5px;<br /> left: 7px;<br /> background-color: #333333;<br /> -webkit-border-radius: 1px;<br /> -moz-border-radius: 1px;<br /> border-radius: 1px;<br /> -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.35);<br /> -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.35);<br /> box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.35);<br /> }<br /> .usb-drive .connector .inner span:first-of-type {<br /> top: 19px;<br /> }<br /> .usb-drive .connector .inner span:last-of-type {<br /> top: 29px;<br /> }<br /> .usb-drive .cap {<br /> width: 36px;<br /> padding-left: 10px;<br /> border-radius: 0 25px 25px 0;<br /> font-size: 18px;<br /> }<br /> .usb-drive:active,<br /> .usb-drive.active {<br /> text-decoration: none;<br /> }<br /> .usb-drive:active .casing,<br /> .usb-drive.active .casing,<br /> .usb-drive:active .cap,<br /> .usb-drive.active .cap {<br /> color: #FFF;<br /> }<br /> .usb-drive:hover .connector,<br /> .usb-drive.hover .connector {<br /> width: 35px;<br /> }<br /> <br /> <br /> /* USB Drive Colouring (via LESS function)<br /> ****************************************/<br /> .red .casing,<br /> .red .cap {<br /> color: #761911;<br /> background-color: #b8271b;<br /> border-top: 1px solid #b8271b;<br /> border-bottom: 1px solid #ce2b1f;<br /> -webkit-box-shadow: 0 5px 0 #5f140e , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);<br /> -moz-box-shadow: 0 5px 0 #5f140e , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);<br /> box-shadow: 0 5px 0 #5f140e , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);<br /> background-color: #c12c20;<br /> background-image: -moz-linear-gradient(top, #df3527, #951f16);<br /> background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#df3527), to(#951f16));<br /> background-image: -webkit-linear-gradient(top, #df3527, #951f16);<br /> background-image: -o-linear-gradient(top, #df3527, #951f16);<br /> background-image: linear-gradient(to bottom, #df3527, #951f16);<br /> background-repeat: repeat-x;<br /> }<br /> .orange .casing,<br /> .orange .cap {<br /> color: #b26800;<br /> background-color: #fe9500;<br /> border-top: 1px solid #fe9500;<br /> border-bottom: 1px solid #ffa019;<br /> -webkit-box-shadow: 0 5px 0 #985900 , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);<br /> -moz-box-shadow: 0 5px 0 #985900 , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);<br /> box-shadow: 0 5px 0 #985900 , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);<br /> background-color: #ee981e;<br /> background-image: -moz-linear-gradient(top, #ffaa32, #d57d00);<br /> background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffaa32), to(#d57d00));<br /> background-image: -webkit-linear-gradient(top, #ffaa32, #d57d00);<br /> background-image: -o-linear-gradient(top, #ffaa32, #d57d00);<br /> background-image: linear-gradient(to bottom, #ffaa32, #d57d00);<br /> background-repeat: repeat-x;<br /> }<br /> .purple .casing,<br /> .purple .cap {<br /> color: #542a82;<br /> background-color: #7a3dbc;<br /> border-top: 1px solid #7a3dbc;<br /> border-bottom: 1px solid #874dc6;<br /> -webkit-box-shadow: 0 5px 0 #48246f , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);<br /> -moz-box-shadow: 0 5px 0 #48246f , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);<br /> box-shadow: 0 5px 0 #48246f , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);<br /> background-color: #814eb9;<br /> background-image: -moz-linear-gradient(top, #9460cc, #66339d);<br /> background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#9460cc), to(#66339d));<br /> background-image: -webkit-linear-gradient(top, #9460cc, #66339d);<br /> background-image: -o-linear-gradient(top, #9460cc, #66339d);<br /> background-image: linear-gradient(to bottom, #9460cc, #66339d);<br /> background-repeat: repeat-x;<br /> }<br /> .green .casing,<br /> .green .cap {<br /> color: #2b732b;<br /> background-color: #40ab40;<br /> border-top: 1px solid #40ab40;<br /> border-bottom: 1px solid #4abb4a;<br /> -webkit-box-shadow: 0 5px 0 #246124 , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);<br /> -moz-box-shadow: 0 5px 0 #246124 , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);<br /> box-shadow: 0 5px 0 #246124 , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);<br /> background-color: #4cad4c;<br /> background-image: -moz-linear-gradient(top, #5cc25c, #358d35);<br /> background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5cc25c), to(#358d35));<br /> background-image: -webkit-linear-gradient(top, #5cc25c, #358d35);<br /> background-image: -o-linear-gradient(top, #5cc25c, #358d35);<br /> background-image: linear-gradient(to bottom, #5cc25c, #358d35);<br /> background-repeat: repeat-x;<br /> }<br /> .carbon .casing,<br /> .carbon .cap {<br /> color: #CCC;<br /> background: linear-gradient(27deg, #222222 5px, transparent 5px) 0 5px, linear-gradient(207deg, #222222 5px, transparent 5px) 10px 0px, linear-gradient(27deg, #2f2f2f 5px, transparent 5px) 0px 10px, linear-gradient(207deg, #2f2f2f 5px, transparent 5px) 10px 5px, linear-gradient(90deg, #282828 10px, transparent 10px), linear-gradient(#2a2a2a 25%, #1a1a1a 25%, #272727 50%, transparent 50%, transparent 75%, #313131 75%, #313131);<br /> background-color: #202020;<br /> -webkit-background-size: 20px 20px;<br /> -moz-background-size: 20px 20px;<br /> -o-background-size: 20px 20px;<br /> background-size: 20px 20px;<br /> -webkit-box-shadow: 0 5px 0 #000000 , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);<br /> -moz-box-shadow: 0 5px 0 #000000 , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);<br /> box-shadow: 0 5px 0 #000000 , inset 0 2px 1px rgba(255, 255, 255, 0.35), 0 8px 3px rgba(0, 0, 0, 0.35);<br /> border-top: 1px solid #333333;<br /> border-bottom: 1px solid #404040;<br /> }<br /> .carbon .cap {<br /> color: #ffc40d;<br /> }<br /> <br /> /* Float Clearfix */<br /> .drives:before,<br /> .drives:after {<br /> display: table;<br /> content: "";<br /> line-height: 0;<br /> }<br /> .drives:after {<br /> clear: both;<br /> }<br /> <br /> /* Font Awesome styles<br /> ------------------ */<br /> @import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");<br /> <br /> [class^="icon-"],<br /> [class*=" icon-"] {<br /> font-family: FontAwesome;<br /> font-weight: normal;<br /> font-style: normal;<br /> text-decoration: inherit;<br /> -webkit-font-smoothing: antialiased;<br /> /* sprites.less reset */<br /> display: inline;<br /> width: auto;<br /> height: auto;<br /> line-height: normal;<br /> vertical-align: baseline;<br /> background-image: none;<br /> background-position: 0% 0%;<br /> background-repeat: repeat;<br /> margin-top: 0;<br /> }<br /> .icon-cloud-download:before {<br /> content: "\f0ed";<br /> }<br /> .icon-cloud-upload:before {<br /> content: "\f0ee";<br /> }<br /> .icon-download:before {<br /> content: "\f01a";<br /> }<br /> .icon-upload:before {<br /> content: "\f01b";<br /> }<br /> .icon-share:before {<br /> content: "\f045";<br /> }<br /> .icon-star:before {<br /> content: "\f005";<br /> }<br /> <br />
HTML Kodları
<div class="wrapper"> <br /> <div class="wrapper"> <br /> <div class="intro"> <h1> Animated CSS3 USB Drives</h1> </div> <div class="drives"> <!-- Blue USB Drive --><br /> <a class="usb-drive" href="#" title="Download"><br /> <div class="casing"> Download</div> <div class="connector"> <div class="inner"> <span></span><br /> <span></span><br /> </div> </div> <div class="cap"> <i class="icon-cloud-download"></i></div> </a><br /> <br /> <!-- Purple USB Drive --><br /> <a class="usb-drive purple" href="#" title="Download"><br /> <div class="casing"> Download</div> <div class="connector"> <div class="inner"> <span></span><br /> <span></span><br /> </div> </div> <div class="cap"> <i class="icon-download"></i></div> </a><br /> <br /> <!-- Red USB Drive --><br /> <a class="usb-drive red" href="#" title="Share"><br /> <div class="casing"> Share</div> <div class="connector"> <div class="inner"> <span></span><br /> <span></span><br /> </div> </div> <div class="cap"> <i class="icon-share"></i></div> </a><br /> <br /> <!-- Orange USB Drive --><br /> <a class="usb-drive orange" href="#" title="Upload"><br /> <div class="casing"> Upload</div> <div class="connector"> <div class="inner"> <span></span><br /> <span></span><br /> </div> </div> <div class="cap"> <i class="icon-cloud-upload"></i></div> </a><br /> <br /> <br /> <!-- Green USB Drive --><br /> <a class="usb-drive green" href="#" title="Download"><br /> <div class="casing"> Upload</div> <div class="connector"> <div class="inner"> <span></span><br /> <span></span><br /> </div> </div> <div class="cap"> <i class="icon-upload"></i></div> <!-- Carbon Pattern USB Drive --><br /> <a class="usb-drive carbon" href="#" title="Stash"><br /> <div class="casing"> Stash</div> <div class="connector"> <div class="inner"> <span></span><br /> <span></span><br /> </div> </div> <div class="cap"> <i class="icon-star"></i></div> </a><br /> </div> </div>


Bizi Takip Edin
Pinterest>> Facebook>> Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın...