Dual Inner Shadow Button Toggler

dual-inner-shadow-button-toggler.markdown

Dual Inner Shadow Button Toggler

Inner box buttons that trigger background color changes

A Pen by Vincent Tang on CodePen.

License.

index.pug

.wrapper
  .btn-set
    .btn#grid-list
      i.fas.fa-th-large
    .btn#item-list.active
      i.fas.fa-bars
      
      

inner-box-shadow-buttons.markdown

Inner Box Shadow Buttons

A Pen by Vincent Tang on CodePen.

License.

script.js

$(document).ready(function() {
  $("#grid-list").on("click", function(){
    $("#grid-list").addClass("active");
    $("#item-list").removeClass("active");
    $(".wrapper").addClass("background-square");
  });
  $("#item-list").on("click", function(){
    $("#item-list").addClass("active");
    $("#grid-list").removeClass("active");
    $(".wrapper").removeClass("background-square");
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

@mixin centerer {display: flex; justify-content: center; align-items: center; height: 100vh};
.wrapper {
  @include centerer;
}

* {
  box-sizing: border-box;
}

.btn-set {
  transform: scale(6); /* Makes it look bigger */
  height: 30px;
  width: 50px;
  display: flex;
  border: 1px solid black;
  border-radius: 2px;
}
.btn {
  background-image: linear-gradient(#e4e5e4,#cfd1cf);
  width: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid black;
  &:nth-child(2){
    border-right:none;
  }
  &:hover {
    background: rgba(0,0,0,0.25);
  }
}
.active {
  background: rgba(0,0,0,0.25);
  box-shadow: inset 0 4px 6px rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.15); /*1st insert = light outside, 2nd inset = dark inside*/
  /* based on https://www.cssmatic.com/box-shadow */
}
.background-square {
  /* based on http://www.heropatterns.com/ */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='Artboard-5' fill='%239C92AC' fill-opacity='0.4' fill-rule='nonzero'%3E%3Cpath d='M6 18h12V6H6v12zM4 4h16v16H4V4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

styles

<link href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" rel="stylesheet" />