ミギムキ

[CSS] マウスオーバー時にアニメーションするボタンを設置したい

やりたいこと

サンプルコード

.btn_anime { display: table; position: relative; padding: 1em 5em; border: 1px solid #3388dd; background-color: #3388dd; color: #fff; } .btn_anime:after { position: relative; top: 0px; right: -0.5em; font-family: FontAwesome; content: "\f105"; } .btn_anime:link, .btn_anime:visited, .btn_anime:active, .btn_anime:hover { color: #fff; text-decoration: none; } .btn_anime:hover:after { animation: arrow_right 1.0s infinite; } @keyframes arrow_right { 50% { right: -1em; opacity: 1; } 100% { right: -1.5em; opacity: 0; } }
スポンサー広告

仕組み、解説、補足など