.underlined-a {
    text-decoration: none;
    color: white;
    padding-bottom: 0.15em;
    box-sizing: border-box;
    box-shadow: inset 0 -0.2em 0 white;
    transition: 0.2s;
  }
  .underlined-a:hover {
    color: #222;
    box-shadow: inset 0 -2em 0 white;
    transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
  }
  .brk-btn {
    position: relative;
    background: none;
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    border: 0.2em solid white;
    padding: 0.5em 1em;
  }
  .brk-btn::before {
    content: "";
    display: block;
    position: absolute;
    width: 10%;
    background: rgb(178, 69, 146);
    height: 0.3em;
    right: 20%;
    top: -0.21em;
    transform: skewX(-45deg);
    -webkit-transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
    transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
  }
  .brk-btn::after {
    content: "";
    display: block;
    position: absolute;
    width: 10%;
    background: rgb(178, 69, 146);
    height: 0.3em;
    left: 20%;
    bottom: -0.25em;
    transform: skewX(45deg);
    -webkit-transition: all 0.45 cubic-bezier(0.86, 0, 0.07, 1);
    transition: all 0.45s cubic-bezier(0.86, 0, 0.07, 1);
  }
  .brk-btn:hover::before {
    right: 80%;
  }
  .brk-btn:hover::after {
    left: 80%;
  }