LoginSignup
1
0

More than 3 years have passed since last update.

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

Posted at

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

通常

スクリーンショット 2020-06-02 11.11.55.png

hover時

スクリーンショット 2020-06-02 11.19.00.png
上記の外部アイコンみたいな、ボタンリンクをやります。

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0