× İletişim Formu CSS Material Buton Tasarımı Arlina Design 3/29/2018 Etiketler : CSS CSS3 Arlina Design <HTML> <head> <style> .btn{position:relative;display:block;margin:30px auto;padding:0;overflow:hidden;border-width:0;outline:none;border-radius:2px;box-shadow:0 1px 4px rgba(0,0,0,.6);background-color:#2ecc71;color:#ecf0f1;transition:background-color .3s} .btn:hover,.btn:focus{background-color:#27ae60} .btn > *{position:relative} .btn span{display:block;padding:12px 24px} .btn:before{content:"";position:absolute;top:50%;left:50%;display:block;width:0;padding-top:0;border-radius:100%;background-color:rgba(236,240,241,.3);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%)} .btn:active:before {width:120%;padding-top:120%;transition:width .2s ease-out, padding-top .2s ease-out} *, *:before, *:after {box-sizing:border-box} html {position:relative;height:100%} body {position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#ecf0f1;color:#34495e;font-family:Trebuchet,Arial,sans-serif;text-align:center} h2 {font-weight:normal} .btn.orange {background: #e67e22} .btn.orange:hover,.btn.orange:focus {background: #d35400} .btn.red {background: #e74c3c} .btn.red:hover, .btn.red:focus {background:#c0392b} </style> </head> <body> <h1>Material Buton Tasarımı</h1> <h2>Sadece CSS kodları ile tasarlanmış Metarial efekli butonlar.</h2> <button class="btn"><span>Yeşil Buton</span></button> <button class="btn orange"><span>Turuncu Buton</span></button> <button class="btn red"><span>Kırmızı Buton</span></button> </body> </HTML> YENİ YAYIN ÖNCEKİ YAYIN "CSS Material Buton Tasarımı" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
CSS Material Buton Tasarımı Arlina Design 3/29/2018 Etiketler : CSS CSS3 Arlina Design <HTML> <head> <style> .btn{position:relative;display:block;margin:30px auto;padding:0;overflow:hidden;border-width:0;outline:none;border-radius:2px;box-shadow:0 1px 4px rgba(0,0,0,.6);background-color:#2ecc71;color:#ecf0f1;transition:background-color .3s} .btn:hover,.btn:focus{background-color:#27ae60} .btn > *{position:relative} .btn span{display:block;padding:12px 24px} .btn:before{content:"";position:absolute;top:50%;left:50%;display:block;width:0;padding-top:0;border-radius:100%;background-color:rgba(236,240,241,.3);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%)} .btn:active:before {width:120%;padding-top:120%;transition:width .2s ease-out, padding-top .2s ease-out} *, *:before, *:after {box-sizing:border-box} html {position:relative;height:100%} body {position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#ecf0f1;color:#34495e;font-family:Trebuchet,Arial,sans-serif;text-align:center} h2 {font-weight:normal} .btn.orange {background: #e67e22} .btn.orange:hover,.btn.orange:focus {background: #d35400} .btn.red {background: #e74c3c} .btn.red:hover, .btn.red:focus {background:#c0392b} </style> </head> <body> <h1>Material Buton Tasarımı</h1> <h2>Sadece CSS kodları ile tasarlanmış Metarial efekli butonlar.</h2> <button class="btn"><span>Yeşil Buton</span></button> <button class="btn orange"><span>Turuncu Buton</span></button> <button class="btn red"><span>Kırmızı Buton</span></button> </body> </HTML>
Yorum Gönder