trustarc skin button

by ian_smithz

HTML

<div class="prefPanel">

<div class="cookiecat">

<div class="switch">
<span class="gwt-InlineHTML on active" aria-hidden="false" style="">Aus</span><span class="gwt-InlineHTML off" aria-hidden="false" style="">Ein</span>
</div>

</div>

</div>

CSS

/* we exist */

@import url('https://fonts.googleapis.com/css?family=Archivo+Narrow');

.switch {
  float: right;
}



/* new 24/10/18 */

/* switch button styles */

.prefPanel .cookiecat .switch span:first-child {
  margin-right: 0.5rem;
}

.prefPanel .cookiecat .switch span {
  position: relative;
  display: inline-block;
  padding: 6px 12px 7px;
  background: #f6f6f6;
  background-image: -webkit-linear-gradient(top, #fcfcfc 0, #f6f6f6 50%, #f0f0f0 50%, #e7e7e7 100%);
  background-image: linear-gradient(to bottom, #fcfcfc 0, #f6f6f6 50%, #f0f0f0 50%, #e7e7e7 100%);
  border: 1px solid #d1d1d1;
  border-radius: 5px;
  color: #636363;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 16px;
  line-height: 100%;
  vertical-align: text-bottom;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  overflow: hidden
}

.prefPanel .cookiecat .switch span.active {
  background: #5eab2a;
  background-image: -webkit-linear-gradient(top, #82c72c 0, #5eab2a 50%, #3e961c 50%, #056a18 100%);
  background-image: linear-gradient(to bottom, #82c72c 0, #5eab2a 50%, #3e961c 50%, #056a18 100%);
  border-color: #0f701d;
  color: #fff;
  text-shadow: none;
}

/* switch button - focus 'n' hover */
.prefPanel .cookiecat .switch span:focus, .prefPanel .cookiecat .switch span:hover {
background: #ededed;
    background-image: -webkit-linear-gradient(top,#f9f9f9 0,#ededed 50%,#e2e2e2 50%,#d1d1d1 100%);
    background-image: linear-gradient(to bottom,#f9f9f9 0,#ededed 50%,#e2e2e2 50%,#d1d1d1 100%);
    border-color: #ababab;
    outline: 0;
}

.prefPanel .cookiecat .switch span.active:focus, .prefPanel .cookiecat .switch span.active:hover {
    background: #408f18;
    background-image: -webkit-linear-gradient(top,#62b11a 0,#408f18 50%,#26770f 50%,#024b0d 100%);
    background-image: linear-gradient(to bottom,#62b11a 0,#408f18 50%,#26770f 50%,#024b0d 100%);
    border-color: #085010;
}

JavaScript

// mimic trustarc js - just for demo

$('.switch span').click(function() {

  $('.switch span').removeClass('active');
  $(this).toggleClass("active");

});