Cacher is the code snippet organizer for pro developers

<!--HTML-->
<div class="container">
  <div class="row">
    <div class="col-offset-8 col-xs-4 slide-out">
      <div class="Title-Box-SR">
        <i class="fa fa-phone text-center" alt="call now, phone icon"></i>

      </div>
      <div class="Slider-Box-SR">
        <a class="btn btn-outline btn-sm btn-block" href="tel:8179886857"><h1>(206) 972-7964</h1></a><br>
      </div>
    </div>
  </div>
</div>

/* CSS */
:root {
--brand:#420080; /* var(--brand) */
--brand-alt:#ffffff; /* var(--brand-alt) */
--brand-lt:#7533B3; /* var(--brand-lt) */
--brand-drk:#0F004D; /* var(--brand-drk) */
--brand-alpha:rgba(33,33,33,0.8); /* var(--brand-alpha) */
--brand-alt-alpha:rgba(201, 201, 201, .5); /* var(--brand-alt-alpha) */
--brand-lt-alpha:rgba(117, 51, 179, .5); /* var(--brand-alt-alpha) */
--brand-drk-alpha:rgba(66, 0, 128, .5); /* var(--brand-alt-alpha) */
--Custom-bold:700; /* var(--Custom-bold) */
}
.btn{
  text-align: left;
  padding-left: 10vw;
}
.fa-phone {
  margin: -35px 0 0 -30px;
  font-size: 80px;
  color:var(--brand-alt);
  transition: transform 1200ms cubic-bezier(0.4, 0.0, 1, 1) 2250ms;
  -webkit-transition: transform 1200ms cubic-bezier(0.4, 0.0, 1, 1) 2250ms;
}
.Title-Box-SR:hover>.fa-phone,
.Title-Box-SR:focus>.fa-phone,
.Title-Box-SR:active>.fa-phone {
  transform: rotate(-360deg);
  transition: transform 1200ms cubic-bezier(0.4, 0.0, 1, 1) 0s;
  -webkit-transition: transform 1200ms cubic-bezier(0.4, 0.0, 1, 1) 0s;
}

.Title-Box-SR {
  background-color:var(--brand);
  padding:7%;
  max-height: 102px;
  max-width:130px;
  border-radius: 36px 0 0px 36px;
  background-position: left top;
  position:absolute;
  top:0; 
  right:0;
  z-index:999999; 
  
}
.Slider-Box-SR {
  background-color:var(--brand);
  max-height: 100px;
  margin: 0 45px 0 0;
  border-radius: 36px 0 0px 36px;
  background-position: left top;
  position:absolute;
  top:0; 
  right:0; 
}
.slide-out>.Slider-Box-SR{
	width:10px;
	transition: width 1s cubic-bezier(0.4, 0.0, 1, 1) 2250ms; 
  -webkit-transition: width 1s cubic-bezier(0.4, 0.0, 1, 1) 2250ms;
}
.slide-out:hover>.Slider-Box-SR,
.slide-out:focus>.Slider-Box-SR,
.slide-out:active>.Slider-Box-SR{
	width:100vw;
	transition: width 1s cubic-bezier(0.0, 0.0, 0.2, 1) 0s; 
  -webkit-transition: width 1s cubic-bezier(0.0, 0.0, 0.2, 1) 0s;
}

p{
  color:var(--brand-alt);
}
h1{
  color:var(--brand-alt);
}