"Scopri il Nostro Nuovo Progetto!" - YOUR SITE

Vai ai contenuti
PULSANTI
Trucchi ed esempi software Incomedia ®
PULSANTI
Trucchi ed esempi software Incomedia ®
PULSANTI PER IL
TUO SITO WEB
Oggetto HTML pronto all'uso


Spesso nei miei progetti ho avuto sempre desiderio di inserire dei pulsanti con un effetto gradevole . In questi giorni guardando sulla rete ho trovato su code pen alcuni progetti in parte non funzionanti come voglio io sicché preso spunto da qualche gradevole progetto ci ho studiato sopra ottenendo quanto sotto rappresentato. Niente di trascendentale sia chiaro ma sempre meglio dei classici pulsanti. Ovviamente la finalità del progetto è rivolto pressoché a fondi scuri di fotografia ma nulla toglie che possano essere utilizzati in altre situazioni.
Allora vediamo come procedere:

Su una vostra pagina di prova inserite un oggetto HTML ►
In struttura Fateci doppio click e su CODICE HTML inserite tutto il LISTATO che trovate in tabella. Un semplice copia-incolla, Tutto quà.
Dovete avere cura di indicare nel menù NAV il percorso delle vostre pagine che funzionerà sia in locale che una volta pubblicato in rete. NOTE: l'oggetto ha uno sfondo nero su stile riga da me inserito per renderlo uniforme ma ciò non toglie che lo sfondo sia diverso. Se siete esperti potete intervenire sul codice cambiando lo sfondo dell'oggetto contenitore DIV mettendone uno di vostro gradimento e cambiare persino i colori dell'animazione. Facendo click sui pulsanti troverete varie combinazioni di sfondo e video applicati all'oggetto sempre in stile riga. I link messi sull'esempio sono stati messi solo per far vedere che funzionano.

CODICE DA INSERIRE:▼
INSERISCI SU "CODICE" IN OGGETTO
HTML INCOMEDIA

<div class="menu-container">
<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="chi-siamo.html">Products</a></li>
    <li><a href="servizi.html">Services</a></li>
    <li><a href="contatti.html">Contact</a></li>
  </ul>
</nav>
</div>

<style>

/* Pulsanti eleganti by MAX */
/* Contenitore del menu */
.menu-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black; /* Sfondo nero */
  width: fit-content;
  margin: auto;
  padding: 20px;
  border-radius: 10px;
}

/* Variabili CSS */
:root {
  --time-slot-length: 0.1s;
  --t1x: var(--time-slot-length);
  --t2x: calc(var(--time-slot-length) * 2);
  --t3x: calc(var(--time-slot-length) * 3);
  --t4x: calc(var(--time-slot-length) * 4);
  --color: dodgerblue;
}

/* Stile del menu */
.menu-container nav ul {
  padding: 0;
}

.menu-container nav ul li {
  list-style: none;
  font-family: sans-serif;
  text-transform: uppercase;
  width: 8em;
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.1em;
  transition: var(--t4x);
  margin: 1em;
  background-color: black;
  position: relative;
}

/* Stile del link */
.menu-container nav ul li a {
  text-decoration: none;
  color: white;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute; /* Assicura che il link sia sopra il li */
  top: 0;
  left: 0;
  z-index: 10; /* Lo porta sopra gli effetti */
  cursor: pointer; /* Mostra il cursore "dito" */
}

/* Effetto hover */
.menu-container nav ul li:hover {
  color: var(--color);
  animation: pulse ease-out 1s var(--t4x);
}

/* Effetti decorativi */
.menu-container nav ul li::before,
.menu-container nav ul li::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-radius: inherit;
  visibility: hidden;
}

.menu-container nav ul li::before {
  top: -1px;
  left: -1px;
  border: 1px solid;
  border-color: var(--color) var(--color) transparent transparent;
  transition:
  height linear var(--t1x) var(--t2x),
  width linear var(--t1x) var(--t3x),
  visibility 0s var(--t4x);
}

.menu-container nav ul li::after {
  bottom: -1px;
  right: -1px;
  border: 1px solid;
  border-color: transparent transparent var(--color) var(--color);
  transition:
  height linear var(--t1x),
  width linear var(--t1x) var(--t1x),
  visibility 0s var(--t2x);
}

.menu-container nav ul li:hover::before,
.menu-container nav ul li:hover::after {
  width: 100%;
  height: 100%;
  visibility: visible;
}

.menu-container nav ul li:hover::before {
  transition:
      visibility 0s,
      width linear var(--t1x),
      height linear var(--t1x) var(--t1x);
}

.menu-container nav ul li:hover::after {
  transition:
      visibility 0s var(--t2x),
      width linear var(--t1x) var(--t2x),
      height linear var(--t1x) var(--t3x);
}

@keyframes pulse {
  from {
      box-shadow: 0 0 hsla(210, 100%, 56%, 0.5);
  }
  to {
      box-shadow: 0 0 0 1em hsla(210, 100%, 56%, 0);
  }
}
</style>
RISULTATO
▼
LI VOLETE IN ORIZZONTALE? ECCOLI
Torna ai contenuti