/*https://codepen.io/foxeisen/pen/yqZbLN*/
/*Como se usa en HTML*/
/*
<a href="#" class="btn-hover-effect btn-hover-effect--effect-1" title="View More">View More</a>
<button class="btn-hover-effect btn-hover-effect--effect-1" title="View More">View More</button>
*/

.btn-block {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
}

.btn-hover-effect {
  display: -webkit-box;
  display: flex;
  font-size: 17px;
  color: rgb(var(--Color-Blanco-Hueso));
  letter-spacing: 1px;
  line-height: 1;
}

/* effects styles !!!YOU NEED THEM */
/* don't forget to add your own background-color and text color */
.btn-hover-effect {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  padding: 22px 36px;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  text-decoration: none;
  overflow: hidden;
}

/* effect 1 styles */
.btn-hover-effect--effect-1 {
  /* overlay block styles */
  /* icon styles */
}
.btn-hover-effect--effect-1:before {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: right top;
          transform-origin: right top;
  z-index: -1;
}
.btn-hover-effect--effect-1:after {
  position: absolute;
  top: 1px;
  right: -40px;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  height: 100%;
  width: 40px;
  content: '\f105';
  font-family: "Font Awesome 5 Free";
  font-size: 25px;
  font-weight: 900;
  line-height: inherit;
  opacity: 0;
}
.btn-hover-effect--effect-1:hover {
  padding-left: 26px;
  padding-right: 46px;
}
.btn-hover-effect--effect-1:hover:before {
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
  -webkit-transform-origin: left top;
          transform-origin: left top;
}
.btn-hover-effect--effect-1:hover:after {
  right: 0;
  opacity: 1;
}

/*-----------------------------------------------------------------------------------------------------*/

/*https://codepen.io/jnbruno/pen/vNpPpW?editors=1100*/
/*Botones Circulares*/
/*Como se usa en HTML*/
/*<button type="button" class="btn btn-primary btn-circle btn-xl">Blue</button>*/

.btn-circle.btn-xl {
        width: 70px;
        height: 70px;
        padding: 10px 16px;
        border-radius: 35px;
        font-size: 24px;
        line-height: 1.33;
}
.btn-circle {
        width: 30px;
        height: 30px;
        padding: 2px 0px;
        border-radius: 15px;
        text-align: center;
        font-size: 12px;
        line-height: 1.42857;
}