Jamstack web creating

BLOG

手軽に名刺替わりのホームページ制作

【CSS】ちょっとイキったボタンの作り方

プログラミング

本記事の対象者

・HTML/CSSを学習中
・Webサイトを制作中
・ちょっと凝ったボタン欲しいかも
こんな方向けです。

最近、ちょっとイキったボタンを作る機会があったので、作り方を紹介します。

Webサイトにはそれぞれ目的がありますが(お問い合わせや商品購入など)
目的が達成されるかどうかのユーザーアクションが、ボタンクリックだったりしますよね。

ボタンデザインで結果が大きく変わるとは思いませんが、
ホバーした時にうにょって動きがあれば、最後の一押しにはなるかもしれませんよね。

今回はCSSのみで実装する、ちょっと凝ったボタンの作り方を紹介します。

作るボタン

こんなボタンを作ります。


PCで読まれている方は、記事右側のサイドバーにこのボタンがあるので見てみてください。

いろんな動きが混じってますが、要素を切り分けると

  1. 文字色が変わる
  2. 背景色が変わる
  3. 文字位置がスライドする
  4. 輪郭をなぞる線が走る


4つあります。
1~3は簡単そうですが、
4の「輪郭をなぞる線」がややこしそうですね。

今回は、4をメインに解説します。

このボタンの輪郭をなぞる動作を、初見で「こうやればできるな」とパッと思いついた方は結構IQ高いと思います。
僕は全くイメージつきませんでしたw

HTML

HTMLの内容は以下です。

<a class="card">
  <span class="card__bd">
    SERVICE
    <span class="card__line"></span>
  </span>
</a>

※ボタンなのにcardという名前になってますがご容赦ください。

<a>タグで作りましたが、form内のinputタグでもなんでもOKです。

.card_bdなるspanタグがちょっと謎に見えるかもですが、
ボタンの周囲を走る線を実装するために必要になってきます。

.card_lineのspanタグは、文字横の線用です。

CSS

先に、全コードを載せます。

$purple:#8400B5;
$white:#FFFFFF;

.card{
  display: block;
  width: 210px;
  line-height: 65px;
  text-align: right;
  font-weight: 600;
  font-size: 1.6rem;
  position: relative;
  cursor: pointer;
  background: $purple;
  color: $white;
  letter-spacing: 0.2em;
  box-sizing: border-box;
  transition: .2s;
  &__line{
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background: $white;
    position: absolute;
    right: 15px;
    top: 50%;
    transition: .2s;
  }
  &::before, &::after{
    position: absolute;
    display: block;
    content:"";
    width: 0;
    height: 2px;
    background-color: $purple;
    transition: all .2s;
  }
  &::before{
    left:0;
    top:0;
  }
  &::after{
    right:0;
    bottom:0;
  }
  &__bd{
    display: block;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    padding-right: 60px;
    transition: .2s;
    &:hover{
      padding-right: 80px;
    }
  }
  &__bd::before, &__bd::after{
    position: absolute;
    display: block;
    content:"";
    height: 0;
    width: 2px;
    background-color: $purple;
    transition: all .2s;
  }
  &__bd::before{
    left:0;
    bottom:0;
  }
  &__bd::after{
    top:0;
    right:0px;
  }
  &:hover{
    background: transparent;
    color:$purple;
    opacity:1;
  }
  &:hover .card__line{
    width: 35px;
    right: 20px;
    background: $purple;
  }
  &:hover::before{
    width: 100%;
    transition-delay: .1s;
  }
  &:hover::after{
    width: 100%;
    transition-delay: .3s;
  }
  &:hover .card__bd::before{
    height: 100%;
    transition-delay: .4s;
  }
  &:hover .card__bd::after{
    height: 100%;
    transition-delay: .2s;
  }
}



Sassで書いていますが、
Sassを触ったことない場合は、VScodeであればEasy SassというCSSにすぐ変換してくれるプラグインがありますので、インストールしてみてください。

単なるボタンのくせに、結構長いですよね。。

基本的なホバー動作

色を変える、文字の位置を変えるなどは、:hoverとつけて値を変えるだけなので簡単です。
フワッと変えたければ、ホバー元の要素にtransition: all .2sなどと書けばOKです。

周囲を走る線の書き方

ここが今回の本題ですが、

ボタン周囲を走る線は、::before::afterの擬似要素で表現します。

擬似要素を線の形に加工し、背景色を与え、hoverで長さを変える。これが基本動作です。

しかし、ボタンの周囲には線が全部で4本あります。
1つの要素に対して加えられる擬似要素は::before::afterの2つだけです。

今回のミソですが、もう2本増やし4本とすために、ボタン本体にブロック要素をもう1つ重ね合わせます。
これが、<span class="card__bd"></span>です。
このspanタグに対しても::before::afterを加えることで、4片の線を表現できます。


今回は、
.card::before → 横線(上)
.card::after → 横線(下)
.card__bd::before → 縦線(左)
.card__bd::after → 縦線(右)
と割り当てて書きます。


横線を表現する、.card::beforeと.card::afterのスタイル抜粋

&::before, &::after{
    position: absolute;
    display: block;
    content:"";
    width: 0;
    height: 2px;
    background-color: $purple;
    transition: all .1s;
  }
  &::before{
    left:0;
    top:0;
  }
  &::after{
    right:0;
    bottom:0;
  }


横線のwidth(線の長さ)は親要素の100%とすべきですが、ホバー前は線は無いので、ここではwidth:0;でOKです。
heightが線の太さになるのでお好みでどうぞ。

横方向の位置指定ですが、
::beforeは左から右に向かって走るので、初期位置としてleft:0;としてください。
::afterは右から左に向かって走るので、初期位置としてright:0;としてください。


続いて、縦線を表現する擬似要素.card__bd::before
.card__bd::afterのスタイルです。

 &__bd::before, &__bd::after{
    position: absolute;
    display: block;
    content:"";
    height: 0;
    width: 2px;
    background-color: $purple;
    transition: all .1s;
  }
  &__bd::before{
    left:0;
    bottom:0;
  }
  &__bd::after{
    top:0;
    right:0px;
  }


前述のように、ホバー前の高さは0でOKです。

位置指定も同様の考えで、
::beforeは下から上に向かって走るので、初期位置としてbottom:0;としてください。
::afterは上から下に向かって走るので、初期位置としてtop:0;としてください。


続いてホバー時の動作です。

  &:hover::before{
    width: 100%;
    transition-delay: .1s;
  }
  &:hover::after{
    width: 100%;
    transition-delay: .3s;
  }
  &:hover .card__bd::before{
    height: 100%;
    transition-delay: .4s;
  }
  &:hover .card__bd::after{
    height: 100%;
    transition-delay: .2s;
  }


元々0だった線の長さをホバー時に100%にすることで、線が走る動作が実現します。

また、線が走る様子をよく見ると、
それぞれの線が同時でなく順番に走っています。


1番目 .card::before が左から右に走る
2番目 .card__bd::after 上から下に走る
3番目 .card::after が右から左に走る
4番目 .card__bd::before が下から上に走る

このように、線を順番に走らせる必要があるので、

1番目transition-delay: .1s;
2番目 transition-delay: .2s;
3番目 transition-delay: .3s;
4番目 transition-delay: .4s;

といったように、各擬似要素に、ホバー〜動作開始までの遅延時間を設けます。

ここで注意すべきなのが、遅延時間と、線の走る速度を合わせないといけません。
上記では0.1秒ずつ遅延させているので、
各区間を0.1秒で走らせる必要がります。
各要素transition: all .1s;とし、各区間を0.1秒で走る設定も加えましょう。


これで完成です。

お試しあれ

まずは全コピペしてみて、
値をいじってどう動きか変わるのか確認してみるのが一番理解しやすいと思います。


それでは、今回は以上です。


ご相談・お見積・お問い合せはお気軽にご連絡ください。

Bubekiti

お問い合わせ