/* HTML */ <a href="#"><button class="button-20">Download</button></a> /* CSS */ .button-20 { 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-20:hover, .button-20: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-20: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; }
0 Comments