Slider Button

index.html

<div class="wrapper">
  
   <div class="row">
    <input type="button" class="button first negative one" value="no access">
    <input type="button" class="button muted" value="read only">
    <input type="button" class="button muted" value="needs approval">
    <input type="button" class="button muted " value="reply only">
    <input type="button" class="button muted last" value="full">
  </div>
  
  <div class="row">
    <input type="button" class="button first one" value="no access">
    <input type="button" class="button two" value="read only">
    <input type="button" class="button three selected" value="needs approval">
    <input type="button" class="button muted" value="reply only">
    <input type="button" class="button muted last" value="full">
  </div>
  
  <div class="row">
    <input type="button" class="button first one" value="no access">
    <input type="button" class="button two" value="read only">
    <input type="button" class="button three" value="needs approval">
    <input type="button" class="button four selected" value="reply only">
    <input type="button" class="button muted last" value="full">
  </div>

  <div class="row">
    <input type="button" class="button first one" value="no access">
    <input type="button" class="button two" value="read only">
    <input type="button" class="button three" value="needs approval">
    <input type="button" class="button four" value="can reply">
    <input type="button" class="button last five selected" value="full">
  </div>
  
</div>  

script.js

// $("input").click(function (event) {
//   $("input").removeClass("clicked");
//   $(this).addClass("clicked"); 
// }) 

scripts

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

slider-button.markdown

Slider Button

A Pen by Jonathan Eyler-Werve on CodePen.

style.scss

.button {
  padding:5px 15px; 
  background: #e8eaea; 
  cursor:pointer;
  width: 20%;
  margin: 0px;
  float: left;
  border: none 0px;
  border-right: 1px solid #f3f4f4; 
  color: #e8eaea;
  font-size: 12px;
}

.first {
  -webkit-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.last {
  -webkit-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.negative.clicked, .negative.one {
  background-color:#db3e3e;
  color: #fff
}

.clicked {
  background: #0ca750;
  color: #ffffff ;
}

.inherit {
  background: #6e797a;
}

.one {
  background: #75dd66;
  color: #75dd66;
}

.two {
  background: #59cb59;
  color: #59cb59;  
}

.three {
  background: #2bb656;
  color: #2bb656;
}

.four {
  background: #0ca750;
  color: #0ca750;  
}

.five {
  background: #069143;
  color: #069143;
}

.row:hover .button:hover {
  color: #fff;
  background-color: #069143;
}

.row:hover .muted {
  background: #d3d6d7;
  color: #d3d6d7;
}

.one:hover, .two:hover, .three:hover, .four:hover, .five:hover {
  color: #fff;
}

.one:hover {
  background-color: #af3131;
}

.row:hover .negative.clicked:hover, .row:hover .negative.one:hover {
  color: #fff;
  background-color: #af3131;
}

.selected {
  color: #ffffff;
}


.row {
  height: 50px;
  padding: 20px 0 50px 0;
  border-bottom: 1px solid #e8eaea;   
}

.row:hover {
  background-color: #f3f4f4;
}

.wrapper {
  margin: 50px;
  width: 500px;
  display: inline-block;

}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />