× İletişim Formu Slayt Görünümlü Demo ve Download Butonları Yapma TRT Çocuk Çizgi Filmleri 3/23/2017 Etiketler : Blogger Buton TRT Çocuk Çizgi Filmleri <!DOCTYPE html> <html> <head> <title>Kodeks Editör</title> <link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css' /> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body { font-family: 'Fira Sans Condensed', sans-serif; -webkit-font-smoothing: antialiased; margin: 30vh auto 0 auto; } #bebuton{margin:20px auto;text-align:center} #bebuton br{display:none} .buton-be,.buton-be2{position:relative;display:inline-block;height:50px;width:200px;line-height:50px;padding:0;border-radius:50px;background:#fefefe;border:2px solid #0792c1;margin:10px;transition:.5s} .buton-be2{border:2px solid #f37a0f} .buton-be:hover{background:#0792c1} .buton-be2:hover{background:#f37a0f} .buton-be:hover span.circle,.buton-be2:hover span.circle2{left:100%;margin-left:-45px;background:#fefefe;color:#0792c1} .buton-be2:hover span.circle2{color:#f37a0f} .buton-be:hover span.keyw,.buton-be2:hover span.keyw2{left:40px;opacity:0} .buton-be:hover span.keyw-hover,.buton-be2:hover span.keyw-hover2{opacity:1;left:40px} .buton-be span.circle,.buton-be2 span.circle2{display:block;background:#0792c1;color:#fff;position:absolute;float:left;margin:5px;line-height:42px;height:40px;width:40px;top:0;left:0;transition:.5s;border-radius:50%} .buton-be2 span.circle2{background:#f37a0f} .buton-be span.keyw,.buton-be span.keyw-hover,.buton-be2 span.keyw2,.buton-be2 span.keyw-hover2{position:absolute;left:90px;text-align:center;margin:0 auto;font-size:15px;font-weight:bold;color:#0792c1;transition:.5s} .buton-be2 span.keyw2,.buton-be2 span.keyw-hover2{color: #f37a0f;left:80px} .buton-be span.keyw-hover,.buton-be2 span.keyw-hover2{left:80px;opacity:0} .buton-be span.keyw-hover,.buton-be2 span.keyw-hover2{color:#fff} </style> </head> <body> <div id="bebuton"> <a href="#" class="buton-be" target="_blank"> <span class="circle"><i class="fa fa-rocket"></i></span> <span class="keyw">Demo</span> <span class="keyw-hover">Buraya Tıkla</span> </a> <a href="#" class="buton-be2" target="_blank"> <span class="circle2"><i class="fa fa-download"></i></span> <span class="keyw2">Download</span> <span class="keyw-hover2">Buraya Tıkla</span> </a> </div> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Slayt Görünümlü Demo ve Download Butonları Yapma" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Slayt Görünümlü Demo ve Download Butonları Yapma TRT Çocuk Çizgi Filmleri 3/23/2017 Etiketler : Blogger Buton TRT Çocuk Çizgi Filmleri <!DOCTYPE html> <html> <head> <title>Kodeks Editör</title> <link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css' /> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body { font-family: 'Fira Sans Condensed', sans-serif; -webkit-font-smoothing: antialiased; margin: 30vh auto 0 auto; } #bebuton{margin:20px auto;text-align:center} #bebuton br{display:none} .buton-be,.buton-be2{position:relative;display:inline-block;height:50px;width:200px;line-height:50px;padding:0;border-radius:50px;background:#fefefe;border:2px solid #0792c1;margin:10px;transition:.5s} .buton-be2{border:2px solid #f37a0f} .buton-be:hover{background:#0792c1} .buton-be2:hover{background:#f37a0f} .buton-be:hover span.circle,.buton-be2:hover span.circle2{left:100%;margin-left:-45px;background:#fefefe;color:#0792c1} .buton-be2:hover span.circle2{color:#f37a0f} .buton-be:hover span.keyw,.buton-be2:hover span.keyw2{left:40px;opacity:0} .buton-be:hover span.keyw-hover,.buton-be2:hover span.keyw-hover2{opacity:1;left:40px} .buton-be span.circle,.buton-be2 span.circle2{display:block;background:#0792c1;color:#fff;position:absolute;float:left;margin:5px;line-height:42px;height:40px;width:40px;top:0;left:0;transition:.5s;border-radius:50%} .buton-be2 span.circle2{background:#f37a0f} .buton-be span.keyw,.buton-be span.keyw-hover,.buton-be2 span.keyw2,.buton-be2 span.keyw-hover2{position:absolute;left:90px;text-align:center;margin:0 auto;font-size:15px;font-weight:bold;color:#0792c1;transition:.5s} .buton-be2 span.keyw2,.buton-be2 span.keyw-hover2{color: #f37a0f;left:80px} .buton-be span.keyw-hover,.buton-be2 span.keyw-hover2{left:80px;opacity:0} .buton-be span.keyw-hover,.buton-be2 span.keyw-hover2{color:#fff} </style> </head> <body> <div id="bebuton"> <a href="#" class="buton-be" target="_blank"> <span class="circle"><i class="fa fa-rocket"></i></span> <span class="keyw">Demo</span> <span class="keyw-hover">Buraya Tıkla</span> </a> <a href="#" class="buton-be2" target="_blank"> <span class="circle2"><i class="fa fa-download"></i></span> <span class="keyw2">Download</span> <span class="keyw-hover2">Buraya Tıkla</span> </a> </div> </body> </html>
Yorum Gönder