Кнопочная анимация в 6 вариантах на CSS

<div class="krasivaya_knopka">
  <button class="akuopsun sumena animasug1">
  <span class="kenopecunam">Кнопка #1</span>
  </button>
  <button class="akuopsun sumena animasug2">
  <span class="kenopecunam">Кнопка #2</span>
  </button>
  <button class="akuopsun sumena animasug3">
  <span class="kenopecunam">Кнопка #3</span>
  </button>
  <button class="akuopsun sumena animasug4">
  <span class="kenopecunam">Кнопка #4</span>
  </button>  
  <button class="akuopsun sumena animasug5">
  <span class="kenopecunam">Кнопка #5</span>
  </button>  
  <button class="akuopsun sumena animasug6">
  <span class="kenopecunam">Кнопка #6</span>
  </button>  
</div>

.akuopsun{
  --uirsumenaBackgroundColor: var(--rsumenaBackgroundColor, transparent);
  --uirsumenaPadding: var(--rsumenaPadding, var(--rsumenaPaddingTop, 0) var(--rsumenaPaddingRight, 0) var(--rsumenaPaddingBottom, 0) var(--rsumenaPaddingLeft, 0));
  --uirsumenaBorderWidth: var(--rsumenaBorderWidth, 0);
  --uirsumenaBorderStyle: var(--rsumenaBorderStyle, solid);
  --uirsumenaBorderColor: var(--rsumenaBorderColor, currentColor);
  --uirsumenaFontFamily: var(--rsumenaFontFamily, inherit);
  --uirsumenaFontSize: var(--rsumenaFontSize, inherit);
  --uirsumenaColor: var(--rsumenaColor);
  background-color: var(--uirsumenaBackgroundColor);
  padding: var(--uirsumenaPadding);
  border-width: var(--uirsumenaBorderWidth);
  border-style: var(--uirsumenaBorderStyle);
  border-color: var(--uirsumenaBorderColor);
  cursor: pointer;
  font-family: var(--uirsumenaFontFamily);
  font-size: var(--uirsumenaFontSize);
}

.akuopsun::-moz-focus-inner,
.akuopsun[type="sumena"]::-moz-focus-inner,
.akuopsun[type="reset"]::-moz-focus-inner,
.akuopsun[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

.sumena{
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.sumena::before{
  content: "";
  position: relative;
  z-index: -1;
}

.animasug1::before{
  width: 214%;
  height: 164%;
  opacity: 0;
  position: absolute;
  left: -50%;
  bottom: 0;
  transform-origin: left bottom;
  transform: rotate(-90deg) translateZ(0);
  will-change: transform, opacity;
  transition-property: transform, opacity;
  transition-duration: .6s;
  transition-timing-function: cubic-bezier(.01,-.24, 0, .68);
}

.animasug1:hover::before{
  transform: rotate(0deg) translateZ(0);
  opacity: 1;
  transition-duration: .2s;
}

.animasug2::before{
  width: 0;
  height: 0;
  padding: 50%;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0) scale(0);
  transition: transform .15s ease-out;
}

.animasug2:hover::before{
  transition-duration: .3s;
  transform: translate3d(-50%, -50%, 0) scale(1.5);
}

.animasug3::before{
  width: 110%;
  height: 0;
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  will-change: opacity, height;
  transition-property: opacity, height;
  transition-duration: .25s, .25s;
  transition-delay: .15s, 0s;
  transition-timing-function: cubic-bezier(0, 0, 0.11, 1.24);
}

.animasug3:hover::before{
  opacity: 1;
  height: 110%;
  transition-duration: .25s, .4s;
  transition-delay: 0s;
}

.animasug4::before{
  width: 0;
  height: 110%;
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  will-change: opacity, width;
  transition-property: opacity, width;
  transition-duration: .25s, .25s;
  transition-delay: .15s, 0s;
  transition-timing-function: cubic-bezier(0, 0, 0.11, 1.24);
}

.animasug4:hover::before{
  opacity: 1;
  width: 110%;
  transition-duration: .25s, .4s;
  transition-delay: 0s;
}

.animasug5::before{
  width: 0;
  height: 110%;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  will-change: opacity, width;
  transition-property: opacity, width;
  transition-duration: .25s, .25s;
  transition-delay: .15s, 0s;
  transition-timing-function: cubic-bezier(0, 0, 0.11, 1.24);
}

.animasug5:hover::before{
  opacity: 1;
  width: 110%;
  transition-duration: .25s, .4s;
  transition-delay: 0s;
}

.animasug6::before{
  width: 110%;
  height: 0;
  opacity: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  will-change: opacity, height;
  transition-property: opacity, height;
  transition-duration: .25s, .25s;
  transition-delay: .15s, 0s;
  transition-timing-function: cubic-bezier(0, 0, 0.11, 1.24);
}

.animasug6:hover::before{
  opacity: 1;
  height: 110%;
  transition-duration: .25s, .4s;
  transition-delay: 0s;
}

.sumena {
  --rsumenaPadding: 1.6rem 3.2rem;
  --rsumenaBorderWidth: 2px;
  --uisumenaBgColorHover: var(--sumenadBgColorHover);
  text-transform: uppercase;
  color: var(--uisumenaBgColorHover);
  -webkit-transition: color .2s ease-out;
  transition: color .2s ease-out;
}

.sumena::before{
  background-color: var(--uisumenaBgColorHover);
}

.sumena:hover {
  color: #f7f3f3;
}

.sumena {
  --sumenaTextColor: #3068c5;
  --sumenadBgColorHover: #3068c5;
  --sumenaTextColorHover: #fdfcfc;
  --rsumenaBorderColor: #3068c5;
}

.sumena:nth-child(2) {
  --sumenaTextColor: #1c8266;
  --sumenadBgColorHover: #1c8266;
  --rsumenaBorderColor: #1c8266;
}

.sumena:nth-child(3) {
  --sumenaTextColor: #824540;
  --sumenadBgColorHover: #824540;
  --rsumenaBorderColor: #824540;
}

.sumena:nth-child(4) {
  --sumenaTextColor: #980d1e;
  --sumenadBgColorHover: #980d1e;
  --rsumenaBorderColor: #980d1e;
}

.sumena:nth-child(5) {
  --sumenaTextColor: #401c80;
  --sumenadBgColorHover: #401c80;
  --rsumenaBorderColor: #401c80;
}

.sumena:nth-child(6) {
  --sumenaTextColor: #b36812;
  --sumenadBgColorHover: #b36812;
  --rsumenaBorderColor: #b36812;
}

@media (min-width: 768px){

  html{
  font-size: 62.5%;
  }
}

@media (max-width: 767px){

  html{
  font-size: 50%;
  }
}

.krasivaya_knopka{
  max-width: 1400px;  
  display: flex;
  flex-wrap: wrap;  
  margin: auto;  
}

.sumena {
  margin: 20px;
  -webkit-box-flex: 1;
  flex-grow: 1;
  border-radius: 3px;
  box-shadow: 0px 0px 9px 1px rgba(142, 136, 136, 0.69), -1px 1px 4px 10px rgba(76, 76, 76, 0);
}