矢印つきボタン

• 右向き
• 下向き
• 上向き

• 右向き

  ボタンリンク
  HTML<a href="" class="btn">ボタンリンク</a> CSS.btn { display: inline-block; padding: .75em 3em .75em 1em; background: #b94047; color: #fff; text-decoration: none; position: relative;} .btn::before { display: block; position: absolute; top: 50%; right: 1em; transform: translateY(-50%) rotate(45deg); width: .5em; height: .5em; border-top: 2px solid #fff; border-right: 2px solid #fff; content: "";}

• 下向き

  ボタンリンク
  HTML<a href="" class="btn2">ボタンリンク</a> CSS.btn2 { display: inline-block; padding: .75em 3em .75em 1em; background: #b94047; color: #fff; text-decoration: none; position: relative;} .btn2::before { display: block; position: absolute; top: 45%; right: 1em; transform: translateY(-50%) rotate(45deg); width: .5em; height: .5em; border-bottom: 2px solid #fff; border-right: 2px solid #fff; content: "";}

• 上向き

  ボタンリンク
  HTML<a href="" class="btn3">ボタンリンク</a> CSS.btn3 { display: inline-block; padding: .75em 3em .75em 1em; background: #b94047; color: #fff; text-decoration: none; position: relative;} .btn3::before { display: block; position: absolute; top: 54%; right: 1em; transform: translateY(-50%) rotate(45deg); width: .5em; height: .5em; border-top: 2px solid #fff; border-left: 2px solid #fff; content: "";}

一覧に戻る