HTML Next Button with SVG Arrow

964 sergioarmijo30

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #121212;
}
.button {
  --main-size: 2em;
  --color-text: #ffffff;
  --color-background: #4a2dcb91;
  --color-background-hover: #ff2e7b;
  --color-outline: #350cd983;
  --color-shadow: #00000040;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  border: none;
  border-radius: calc(var(--main-size) * 100);
  padding: 0.33em 0 0.33em 0.66em;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: var(--main-size);
  color: var(--color-text);
  background: var(--color-background);
  box-shadow: 0 0 0.2em 0 var(--color-background);
  transition: 1s;
}

.button:active {
  transform: scale(0.95);
}

.button:hover {
  outline: 0.1em solid transparent;
  outline-offset: 0.2em;
  box-shadow: 0 0 1em 0 var(--color-background);
  animation:
    ripple 1s linear infinite,
    colorize 1s infinite;
  transition: 0.5s;
}

.button span {
  margin-right: 0.3em;
  transition: 0.5s;
}

.button:hover span {
  text-shadow: 5px 5px 5px var(--color-shadow);
}

.button:active span {
  text-shadow: none;
}

.button svg {
  height: 0.8em;
  fill: var(--color-text);
  margin-right: -0.16em;
  position: relative;
  transition: 0.5s;
}

.button:hover svg {
  margin-right: 0.66em;
  transition: 0.5s;
  filter: drop-shadow(5px 5px 2.5px var(--color-shadow));
}

.button:active svg {
  filter: none;
}

.button svg polygon:nth-child(1) {
  transition: 0.4s;
  transform: translateX(-60%);
}

.button svg polygon:nth-child(2) {
  transition: 0.5s;
  transform: translateX(-30%);
}

.button:hover svg polygon:nth-child(1) {
  transform: translateX(0%);
  animation: opacity 1s infinite 0.6s;
}

.button:hover svg polygon:nth-child(2) {
  transform: translateX(0%);
  animation: opacity 1s infinite 0.4s;
}

.button:hover svg polygon:nth-child(3) {
  animation: opacity 1s infinite 0.2s;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes colorize {
  0% {
    background: var(--color-background);
  }
  50% {
    background: var(--color-background-hover);
  }
  100% {
    background: var(--color-background);
  }
}

@keyframes ripple {
  0% {
    outline: 0em solid transparent;
    outline-offset: -0.1em;
  }
  50% {
    outline: 0.2em solid var(--color-outline);
    outline-offset: 0.2em;
  }
  100% {
    outline: 0.4em solid transparent;
    outline-offset: 0.4em;
  }
}

HTML Next Button with SVG Arrow

Recommended