Webleb - Snippet di Codice -

3155 pan4o

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

11 January 2026

Modello di sito web portfolio per web designer

14 June 2025

Un codice di Metehan

HTML

CSS

html, body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #161616;
  overflow: hidden;
  /* transform: scale(1.5); */
}

/* button */
.btn {
  margin: 100px;
  padding: 15px 40px;
  border: none;
  outline: none;
  color: #FFF;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 12px;
}
.btn::after {
  content: "";
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #333;
  left: 0;
  top: 0;
  border-radius: 10px;
}
/* glow */
.btn::before {
  content: "";
  background: linear-gradient(
    45deg,
    #FF0000, #FF7300, #FFFB00, #48FF00,
    #00FFD5, #002BFF, #FF00C8, #FF0000
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 600%;
  z-index: -1;
  width: calc(100% + 4px);
  height:  calc(100% + 4px);
  filter: blur(8px);
  animation: glowing 20s linear infinite;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
  opacity: 0;
}

@keyframes glowing {
  0% {background-position: 0 0;}
  50% {background-position: 400% 0;}
  100% {background-position: 0 0;}
}

/* hover */
.btn:hover::before {
  opacity: 1;
}

.btn:active:after {
  background: transparent;
}

.btn:active {
  color: #000;
  font-weight: bold;
}

Consigliato

Metehan

Modello di sito web portfolio per web designer

Un codice di Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS