CSSでカラフルなボタンをつくろう - みかづきブログその3

以前、 CSSでボタンをつくったことがありましたが、今回はカラフルなボタンをつくってみました。

DEMO

See the Pen button by kimmy (@kimmy) on CodePen.

HTML

<div class="btn red adjust">
  <div class=hole>
    <div class="inner">H</div>
  </div>
</div>

<div class="btn purple adjust">
  <div class=hole>
    <div class="inner">E</div>
  </div>
</div>

<div class="btn blue adjust">
  <div class=hole>
    <div class="inner">L</div>
  </div>
</div>

<div class="btn green adjust">
  <div class=hole>
    <div class="inner">L</div>
  </div>
</div>

<div class="btn yellow adjust">
  <div class=hole>
    <div class="inner">O</div>
  </div>
</div>

SCSS

body {
  background: #ececec;
}

.adjust {
  display: inline-block;
  margin: 25px;
}

.btn {
  cursor: pointer;

  .hole {
    position: relative;
    border-radius: 50%;
    width: 80px; height: 80px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
  }
  
  .inner {
    position: relative;
    border-radius: 50%;
    width: 80px; height: 80px;
    color: rgba(255, 255, 255, .9);
    line-height: 80px;
    text-align: center;
    cursor: pointer;
    transition: opacity .6s ease;
    pointer-events: none;
    overflow: hidden;
    
    &:after {
      display: block;
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      content: "";
      background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, 0));
    }
  }
  
  &:hover {
    .hole {
      box-shadow: none;
    }
    
    .inner {
      top: 4px;
      box-shadow: none !important;
      
      &:after {
        background: rgba(255, 255, 255, 0);
      }
    }
  }
  
  &.push {
    .hole {
      top: 4px;
      box-shadow: 0 4px 4px rgba(0, 0, 0, .25) inset;
      overflow: hidden;
    }
  }
  
  &.red .inner {
    background: rgb(216, 84, 79);
    box-shadow: 0 2px 0 rgb(128, 50, 47);
  }
  
  &.purple .inner {
    background: rgb(141, 99, 202);
    box-shadow: 0 2px 0 rgb(84, 59, 120);
  }

  &.blue .inner {
    background: rgb(107, 184, 197);
    box-shadow: 0 2px 0 rgb(63, 110, 117);
  }

  &.green .inner {
    background: rgb(135, 194, 128);
    box-shadow: 0 2px 0 rgb(80, 115, 76);
  }
  
  &.yellow .inner {
    background: rgb(220, 227, 119);
    box-shadow: 0 2px 0 rgb(130, 136, 71);
  }
}

JavaScript

(function(win, doc) {
  
  "use strict";
  
  var btns = doc.querySelectorAll(".btn"),
      length = btns.length,
      i = length;
  
  while(i--) {
    new Button(btns[i]);
  }
  
  function Button(elm) {
    var PUSH_CLASSNAME = "push";
    
    _init();
    
    function _init() {
      elm.addEventListener("mousedown",  _handlePushStart, false);
      elm.addEventListener("touchstart", _handlePushStart, false);
      elm.addEventListener("mouseup",    _handlePushEnd,   false);
      elm.addEventListener("touchend",   _handlePushEnd,   false);
    }
    
    function _handlePushStart() {
      elm.classList.add(PUSH_CLASSNAME);
    }
    
    function _handlePushEnd() {
      elm.classList.remove(PUSH_CLASSNAME);
    }
  }
  
})(this, document);

パーツをストックしておくとモックを作成したりするときに便利ですね。