Webleb - Snippet di Codice -

5708 pan4o

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

10 June 2025

Codice sorgente HTML5 del gioco Room Clicker

25 November 2025

Destino

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap');

:root {
  --clr-neon: #ff1414;
  --clr-bg: #000000;
  --font-size: 3rem;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--clr-bg);
  color: var(--clr-neon);
  font-family: "Balsamiq Sans";
  overflow: hidden;
}

.neon {
  margin-top: -150px;
  font-size: var(--font-size);
  display: inline-block;
  position: relative;
  cursor: pointer;
  border: var(--clr-neon) 0.125em solid;
  padding: 0.25em 1em;
  border-radius: 0.25em;
  text-shadow:
    0 0 .20em #FFF7,
    0 0 .30em var(--clr-neon);
  box-shadow:
    inset 0 0 .5em var(--clr-neon),
    0 0 .5em var(--clr-neon);
}

.neon::before {
  content: "";
  position: absolute;
  top: 140%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--clr-neon);
  transform:
    perspective(0.2em) rotateX(10deg) scale(1.3, 0.40);
  filter: blur(0.5em);
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 100ms linear;
}

.neon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--clr-neon);
  box-shadow: 0 0 2em var(--clr-neon);
  z-index: -1;
  opacity: 0;
  transition: opacity 100ms linear;
}

.neon:hover::after {
  opacity: 1;
}

.neon:hover,
.neon:focus {
  color: white;
}

.neon:hover::before {
  opacity: 0.8;
}

Consigliato

Un codice di programmationant

Codice sorgente HTML5 del gioco Room Clicker

Destino

HTML

CSS

JS

Consigliato

Un codice di programmationant

Codice sorgente HTML5 del gioco Room Clicker

Destino

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS