.container {
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    margin: 0 auto 10px;
    padding: .5em;
    line-height: normal;
  }
  .container .button {
    color: #fff;
    margin: 20px;
    padding: 12px 15px;
    text-align: center;
    text-transform: uppercase;
    position: relative;
    transition: .3s;
    z-index: 1;
    background: #9f5ba8;
    cursor: pointer;
    border-radius: 6px;
  }
  .container .button:before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: "";
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 0;
    background: radial-gradient(ellipse at center, #531561 0%, rgba(81, 25, 95, 0) 80%);
    transition-duration: 0.3s;
    transition-property: transform opacity;
  }
  .container .button:hover{
    background: #390b42;
    transform: translateY(-5px);    
  }
  .container .button:hover:before{
    opacity: 1;
    transform: translateY(5px);
  }
  @keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
  }