<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