Botão HTML Avançar com Seta SVG

691 sergioarmijo30

Abrir no Editor Video Publique Seu Código

Recomendado

11 September 2025

Jogo Brick Breaker HTML Canvas JavaScript

26 October 2024

Modelo de site de portfólio de desenvolvedor HTML CSS

7 January 2026

Modelo HTML para E-commerce: Site de Compras com Tailwind

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

Jogo Brick Breaker HTML Canvas JavaScript

Modelo de site de portfólio de desenvolvedor HTML CSS

Modelo HTML para E-commerce: Site de Compras com Tailwind

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS