
CSSだけでつくるキラッと光るボタン
2015年8月5日CSSテクニック
以前jQueryを利用して光がアニメーションするボタンを作りましたが、今回はCSS3のanimationを使って光のアニメーションを作った、CSSだけで動くキラっと光るボタンです。
HTML
<span id="button"><a href="javascript:void(0);">shiny button</a></span>
CSS
#button { display: block; width: 100%; max-width: 180px; margin: 0 auto; } #button a { display: block; position: relative; z-index: 2; overflow: hidden; width: 100%; border: 1px solid #52d3ff; border-radius: 2px; background-color: #52d3ff; color: #ffffff; padding: 12px 0; text-align: center; text-decoration: none; transition: .25s linear; -webkit-transition: .25s linear; -moz-transition: .25s linear; } #button a:hover { color: #52d3ff; background-color: #ffffff; } #button a:before { display: block; position: absolute; z-index: -1; left: -30%; top: -50%; content: ""; width: 30px; height: 100px; transform: rotate(30deg); -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0))); background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ffffff rgba(255,255,255,1),rgba(255,255,255,0) 100%); animation: shiny 3s infinite linear; -webkit-animation: shiny 3s infinite linear; -moz-animation: shiny 3s infinite linear; } @keyframes shiny { 0% { left: -30%; } 20% { left: 120%; } 100% { left: 120%; } } @-webkit-keyframes shiny { 0% { left: -30%; } 20% { left: 120%; } 100% { left: 120%; } } @-moz-keyframes shiny { 0% { left: -30%; } 20% { left: 120%; } 100% { left: 120%; } }