ミギムキ

[CSS] よく使うボタンリンクまとめ

右矢印付きのボタン

.btn_link { display: table; position: relative; padding: 1em 3em 1em 3em; margin: 60px auto; background-color: #3388dd; color: #fff; text-decoration: none; } .btn_link:hover { background-color: #4499ee; color: #fff; } .btn_link:before { position: absolute; top: 50%; right: 1.5em; width: 0.5em; height: 0.5em; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: translateY(-50%) rotate(45deg); content: ""; }