SVG तीर के साथ HTML अगला बटन

अनुशंसित

3 July 2025

फिटनेस जिम वेबसाइट HTML CSS टेम्पलेट

9 September 2024

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

SVG तीर के साथ HTML अगला बटन

अनुशंसित

फिटनेस जिम वेबसाइट HTML CSS टेम्पलेट

जादुई एनिमेशन बटन

HTML CSS आधुनिक नेवबार

HTML

CSS

JS

अनुशंसित

फिटनेस जिम वेबसाइट HTML CSS टेम्पलेट

जादुई एनिमेशन बटन

HTML CSS आधुनिक नेवबार

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS