CSSでボタンをつくる 🔘

フラットなボタンが欲しくなって、はじめは イラストレーター で作ってSVGで書き出そうと思っていたのですが、僕のイラレスキルだと、CSSで作ってしまった方が手っ取り早かったので、CSSでさささっとつくってみました。

DEMO

ソースコード

HTML

<div class="btn">
  <div class="top">
    <div class="top-top"></div>
    <div class="top-bottom"></div>
  </div> 
  <div class="bottom">
    <div class="bottom-top"></div>
    <div class="bottom-bottom"></div>
  </div> 
</div>

SCSS

* {
  box-sizing: border-box;
}

.btn {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  width: 400px; height: 324px;
}

.top {
  position: relative;
  left: 40px;
  z-index: 1;
  cursor: pointer;
  
  &:hover {
    .top-top {
      top: 52px;
      
      &:before {
        height: 0;
      }
      
      &:after {
        height: 0;
      }
    }
  }
}

.top-top {
  display: block;
  position: relative;
  top: 0;
  border-radius: 50%;
  border: solid 24px #000;
  width: 320px; height: 180px;
  background: #E53935;
  z-index: 1;
  transition: all .2s ease-in-out;
  
  &:before {
    display: block;
    position: absolute;
    left: -24px; top: 50%;
    width: 24px; height: 48px;
    content: '';
    background: #000;
    transition: height .2s ease-in-out;
  }
  
  &:after {
    display: block;
    position: absolute;
    right: -24px; top: 50%;
    width: 24px; height: 48px;
    content: '';
    background: #000;
    transition: height .2s ease-in-out;
  }
}

.top-bottom {
  display: block;
  position: absolute;
  top: 52px;
  border-radius: 50%;
  border: solid 24px #000;
  width: 320px; height: 180px;
  background: #D32F2F;
}

.bottom {
  position: absolute;
  top: 48px;
  z-index: 0;
}

.bottom-top {
  display: block;
  position: relative;
  border-radius: 50%;
  border: solid 24px #000;
  width: 400px; height: 225px;
  background: #FDD835;
  z-index: 1;
  
  &:before {
    display: block;
    position: absolute;
    left: -24px; top: 50%;
    width: 24px; height: 52px;
    content: '';
    background: #000;
  }
  
  &:after {
    display: block;
    position: absolute;
    right: -24px; top: 50%;
    width: 24px; height: 52px;
    content: '';
    background: #000;
  }
}

.bottom-bottom {
  display: block;
  position: absolute;
  top: 52px;
  border-radius: 50%;
  border: solid 24px #000;
  width: 400px; height: 225px;
  background: #FBC02D;
}

かなり愚直に書きました。
擬似要素をもっと上手く使ったり、ドロップシャドウを使ったりすれば、もっとシンプルなHTMLにできるような気もしますが、デザインと同時に進めたかったので、サイズや位置の調整のしやすさを優先しました。