![3B buton tasarımı](https://www.mintik.com/wp-content/uploads/2013/05/3B-buton-tasarimi.png)
Resim kullanılmadan sadece Css3 ile hazırlanmış bir buton örneği. Mouse ile bastığınızda içeri doğru batıyor ve geri çektiğinizde eski haline geri geliyor. Bu işlem esnasında gölgeside butonun içeri batmasıyla beraber küçülüyor. Bu özelik butona daha gerçekçi bir görünüm kazandırmış. Birde buton yazısının hafif gri renkten oluşturulmuş ve mouseyi butonun üzerine getirip beklediğinizde buton üzerindeki yazı parlamaya başlıyor.
Css :
button { display: block; font-size: 1.1em; font-weight: bold; text-transform: uppercase; padding: 10px 15px; margin: 20px auto; color: #ccc; background-color: #555; background: -webkit-linear-gradient(#888, #555); background: linear-gradient(#888, #555); border: 0 none; border-radius: 3px; text-shadow: 0 -1px 0 #000; box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6); cursor: pointer; -webkit-transition: all 150ms ease; transition: all 150ms ease; } button a { text-decoration:none; color:#CCCCCC; } button:hover, button:focus { -webkit-animation: pulsate 1.2s linear infinite; animation: pulsate 1.2s linear infinite; } @-webkit-keyframes pulsate { 0% { color: #ddd; text-shadow: 0 -1px 0 #000; } 50% { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; } 100% { color: #ddd; text-shadow: 0 -1px 0 #000; } } @keyframes pulsate { 0% { color: #ddd; text-shadow: 0 -1px 0 #000; } 50% { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; } 100% { color: #ddd; text-shadow: 0 -1px 0 #000; } } button:active { color: #fff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9); -webkit-transform: translateY(3px); transform: translateY(3px); -webkit-animation: none; animation: none; }
Html :
<button><a href="javascript:void(0);">Push me!</a></button>
Elinize sağlık. Teşekkürler.