【備忘録：HTML/CSS】cssのストック集って持ってたほうがいいよね？-ボタンデザイン編-

5277 ワード
HTML5 CSS3 HTML5 テキストリンク

外部アイコンのようなボタンデザイン

通常

hover時


上記の外部アイコンみたいな、ボタンリンクをやります。

index.html
<p><a href="#" class="m-btn-external">外部アイコンみたいなボタン</a></p>
style.scss
.m-btn-external{
  display: block;
  margin: 0 auto;
  padding: 10px;
  max-width: 250px;
  color: #000;
  text-decoration: none;
  text-align: center;
  position: relative;
  border: 1px solid #000;//①まず枠線
  &:before,&:after{//疑似要素で外部アイコン風の線を表現
    content: "";
    display: inline-block;
    position: absolute;
    bottom: -7px;//②ボタンの右下に配置
    right: -7px;//②ボタンの右下に配置
    background: #111;
    transition: all .5s ease;
  }
  &:before{
    width: 100%;//③線の長さ
    height: 1px;//④線の太さ
  }
  &:after{
    width: 1px;//④線の太さ
    height: 100%;//③先の長さ
  }
  &:hover{
    &:before{//⑤hover時に線を短くしていき、ボタンだけにする
      width: 0;
    }
    &:after{//⑤hover時に線を短くしていき、ボタンだけにする
      height: 0;
    }
  }
}

動きが見せられないのですが、hover時はtransitionがかっているので、うざったい動きにならずにいいアクセントを出せるようになっています。
線の太さや色、配置場所を変更できますのでcssで設定できると表現の幅が広がるかと思います。

参考元：
https://note.com/pulpstyle