みかづきブログ その3

3ヶ月つづけてみました。

CSSでカラフルなボタンをつくろう


続・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);

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