ミギムキ

[CSS] くの字型の矢印アイコンをつけたリンクボタン

くの字型の矢印アイコンをつけたボタン

サンプルコード

html

<a href="#" class="btn_arrow">ボタン</a>
スポンサー広告

CSS

.btn_link { display: table; position: relative; padding: 1em 2.5em; min-width: 8em; border: 2px solid currentColor; color: #3388dd; font-size: 16px; font-weight: bold; text-align: center; text-decoration: none; box-sizing: border-box; transition: 0.5s; } .btn_link:after { position: absolute; top: 50%; right: 1em; width: 0.5em; height: 0.5em; transform: translateY(-50%) rotate(45deg); border-right: 2px solid currentColor; border-top: 2px solid currentColor; content: ""; } .btn_link:hover { border: 2px solid #3388dd; background-color: #3388dd; color: #fff; }