.but,
button {
  outline: none;
  border: none;
  background: inherit;
  padding: 10px;
  box-sizing: border-box !important;
}
.button-1 {
  --color: #0077ff;
  font-family: inherit;
  display: inline-block;
  width: auto;
  height: auto;
  line-height: 2.5em;
  overflow: hidden;
  margin: 20px;
  font-size: 17px;
  z-index: 1;
  color: var(--color);
  border: 2px solid var(--color);
  border-radius: 6px;
  position: relative;
}

.button-1::before {
  position: absolute;
  content: "";
  background: var(--color);
  width: 150px;
  height: 200px;
  z-index: -1;
  border-radius: 50%;
}

.button-1:hover {
  color: white;
}

.button-1:before {
  top: 100%;
  left: 100%;
  transition: .3s all;
}

.button-1:hover::before {
  top: -30px;
  left: -30px;
}

      .button-2 {
        padding: 1rem 2rem;
        font-weight: 700;
        background: rgb(255, 255, 255);
        color: blueviolet;
        border-radius: .5rem;
        border-bottom: 2px solid blueviolet;
        border-right: 2px solid blueviolet;
        border-top: 2px solid white;
        border-left: 2px solid white;
        transition-duration: 1s;
        transition-property: border-top,
          border-left,
          border-bottom,
          border-right,
          box-shadow;
      }
      
      .button-2:hover {
        border-top: 2px solid blueviolet;
        border-left: 2px solid blueviolet;
        border-bottom: 2px solid rgb(238, 103, 238);
        border-right: 2px solid rgb(238, 103, 238);
        box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px;
      }

        .button-3 {
      border: none;
      padding: 0.8em 2.5em;
      outline: none;
      color: white;
      font-style: 1.2em;
      position: relative;
      z-index: 1;
      cursor: pointer;
      background: none;
      text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.45);
    }
  
        .button-3::before,
        .button-3::after {
      position: absolute;
      top: 50%;
      left: 50%;
      border-radius: 10em;
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      width: 105%;
      height: 105%;
      content: "";
      z-index: -2;
      background-size: 400% 400%;
      background: linear-gradient(100deg,
          #f79533,
          #f37055,
          #ef4e7b,
          #a166ab,
          #5073b8,
          #1098ad,
          #07b39b,
          #6fba82);
    }
  
        .button-3::before {
      -webkit-filter: blur(7px);
      filter: blur(7px);
      -webkit-transition: all 0.25s ease;
      transition: all 0.25s ease;
      -webkit-animation: pulse 10s infinite ease;
      animation: pulse 10s infinite ease;
    }
  
        .button-3::after {
      -webkit-filter: blur(0.3px);
      filter: blur(0.3px);
    }
  
        .button-3:hover::before {
      width: 115%;
      height: 115%;
    }


          .button-4 {
          padding: 15px;
          width: auto;
          font-family: 'Montserrat', sans-serif;
          font-weight: 600;
          font-size: 16px;
          color: #fff;
          border: none;
          border-radius: 5px;
          background: linear-gradient(145deg, #9c27b0, #f44336, #ff9800, #ffc107, #8bc34a, #4caf50, #2196f3, #03a9f4, #00bcd4, #009688);
          background-size: 200%;
          background-position: 0%;
          box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25), inset 0px -1px 0px rgba(255, 255, 255, 0.2);
          transition: all 0.3s ease-in-out;
        }
    
        .button-4:hover {
          background-position: 100%;
          box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25), inset 0px -2px 0px rgba(255, 255, 255, 0.2);
        }
    
        .button-4:focus {
          outline: none;
        }
    
        .button-4:active {
          background-size: 100%;
          box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25), inset 0px -1px 0px rgba(255, 255, 255, 0.2);
        }


                .button-5 {
                  border-right: 1px solid #ff758f;
                  border-bottom: 1px solid #ff758f;
                  border-top: 1px solid transparent;
                  border-left: 1px solid transparent;
                  outline: none;
                  background: #f8f9fa;
                  font-size: 17px;
                  padding: 1em 2em;
                  border-radius: .5em;
                  position: relative;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  overflow: hidden;
                  transition: all .5s;
                  z-index: 1;
                }
        
          .button-5:hover {
                  color: #212529;
                  border-right: 1px solid transparent;
                  border-bottom: 1px solid transparent;
                  border-top: 1px solid #ff758f;
                  border-left: 1px solid #ff758f;
                  box-shadow: 1px 1px 0 #f8f9fa,
                    2px 2px 0 #e9ecef,
                    3px 3px 0 #fff0f3,
                    4px 4px 0 #ffb3c1,
                    5px 5px 0 #ff4d6d,
                    6px 6px 0 #6c757d,
                    7px 7px 0 #a4133c,
                    8px 8px 0 #800f2f,
                    9px 9px 0 #212529;
                }
        
           .button-5:active {
                  transition: 0s;
                  transform: scale(.93);
                }
        
       .button-5::before,
       .button-5::after {
                  left: 0;
                  content: '';
                  position: absolute;
                  background: #ffccd5;
                  z-index: -1;
                }
        
.button-5::before {
                  width: 0;
                  height: 10%;
                  transition: width .5s;
                }
        
 .button-5:hover::before {
                  width: 100%;
                }
        
 .button-5::after {
                  width: 100%;
                  height: 0;
                  border-radius: 100%;
                  transition: all .5s .2s;
                }
        
.button-5:hover::after {
                  height: 100%;
                  border-radius: 0;
                }