みかづきブログ その3

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

CSSでおしゃれな切り替えボタンをつくる その2

アニメーションをつけてみました。


DEMO

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


HTML

<ul data-color="red" class="colors">
  <li data-color="red" class="btn color"></li>
  <li data-color="blue" class="btn color"></li>
  <li data-color="green" class="btn color"></li>
  <li data-color="yellow" class="btn color"></li>
</ul>

SCSS

.colors {
  $colors : "red", "blue", "green", "yellow";

  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  width: 544px; height: 88px;

  @each $color in $colors {
    &[data-color="#{$color}"] {
      .color {
        &[data-color="#{$color}"] {
          &:before {
            margin: -36px;
            width: 72px; height: 72px;
          }
        }
      }
    }
  }
}

.color {
  float: left;
  position: relative;
  margin: 0 24px;
  border-radius: 50%;
  width: 88px; height: 88px;
  overflow: hidden;
  cursor: pointer;

  &:before {
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    margin: -6px;
    border-radius: 50%;
    width: 12px; height: 12px;
    content: "";
    opacity: 0;
    transition: all ease-out .15s;
  }

  &:after {
    box-sizing: border-box;
    display: block;
    position: relative;
    margin: 20px;
    border-radius: 50%;
    width: 48px; height: 48px;
    content: "";
  }

  &[data-color="red"] {
    &:before {
      background: linear-gradient(#FF8A80, #D50000);
      opacity: .3;
    }

    &:after {
      background: linear-gradient(#FF8A80, #D50000);
    }
  }

  &[data-color="blue"] {
    &:before {
      background: linear-gradient(#8C9EFF, #304FFE);
      opacity: .3;
    }

    &:after {
      background: linear-gradient(#8C9EFF, #304FFE);
    }
  }

  &[data-color="green"] {
    &:before {
      background: linear-gradient(#A7FFEB, #00BFA5);
      opacity: .3;
    }

    &:after {
      background: linear-gradient(#A7FFEB, #00BFA5);
    }
  }

  &[data-color="yellow"] {
    &:before {
      background: linear-gradient(#FFE57F, #FFAB00);
      opacity: .3;
    }

    &:after {
      background: linear-gradient(#FFE57F, #FFAB00);
    }
  }
}

JavaScript

document.querySelector(".colors").addEventListener("click", function (evt) {
  this.setAttribute("data-color", evt.target.getAttribute("data-color"));
}, false);