Botão HTML Avançar com Seta SVG

487 sergioarmijo30

Abrir no Editor Publique Seu Código

Recomendado

20 June 2025

Modelo de painel de administração HTML

28 June 2025

Modelo HTML de página de erro 404

27 September 2025

Compre moedas TikTok: recarregue e envie presentes

HTML

CSS

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;
  }
}

Recomendado

Modelo de painel de administração HTML

Modelo HTML de página de erro 404

Compre moedas TikTok: recarregue e envie presentes

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS