TOOLTIP LATERALE
Non visibile da cellulare
Progetto FREE
Semplice stiky bar a comparsa laterale con funzione pulsante ed effetto overlay su passaggio.
Imposta una pagina test come quella seguente:
Dopo aver creato la struttura portati sull'oggetto html e facci sopra doppio clck. In Codice inserisci tutto il listato che segue:
CODICE | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"> <style> /* Animazione di entrata by max 2025 */ @keyframes slideInFromLeft { from { left: -100px; /* Parte fuori dallo schermo */ opacity: 0; /* Inizia invisibile */ } to { left: -60px; /* Posizione finale */ opacity: 1; /* Visibile */ } } /* Effetto di animazione */ .toggle-button { animation: slideInFromLeft 0.8s ease-out; /* Applica l'animazione */ } /* Stile del pulsante custom by max 2025 */ .toggle-button { position: fixed; left: -45px; top: 80%; transform: translateY(-50%) rotate(-90deg); /* Rotazione verticale */ padding: 21px 45px; background: linear-gradient(45deg, #ff416c, #ff4b2b); color: white; border: none; border-radius: 0 0 10px 10px; /* Arrotonda solo gli angoli inferiori */ cursor: pointer; font-size: 16px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 5px 15px rgba(255, 65, 108, 0.5); transition: background 0.3s ease, box-shadow 0.5s ease, color 0.3s ease; /* Transizioni fluide */ white-space: nowrap; z-index: 2147483647; /* Garantisce visibilità sopra tutto */ text-decoration: none; display: flex; /* Per posizionare testo e icona */ flex-direction: column; /* Posiziona testo e icona verticalmente */ align-items: center; /* Centra il contenuto */ gap: 5px; /* Aggiunge spazio tra il testo e l'icona */ } /* Effetto overlay al passaggio del mouse */ .toggle-button:hover { background: linear-gradient(45deg, #e6454f, #d63242); /* Cambia colore sfondo */ box-shadow: 0 8px 20px rgba(230, 69, 79, 0.7); /* Ombra più intensa */ color: #fff; /* Mantiene il testo visibile */ } /* Stile dell'iconcina */ .toggle-button i { font-size: 18px; /* Dimensione dell'icona */ color: white; /* Colore bianco per uniformità */ transform: rotate(90deg); /* Ripristina l'orientamento orizzontale */ transition: color 0.3s ease; /* Effetto fluido al passaggio del mouse */ } /* Cambio colore icona al passaggio del mouse */ .toggle-button:hover i { color: yellow; /* Cambia il colore dell'icona durante il passaggio del mouse */ } </style> <a href="index.html" class="toggle-button"> Servizi <i class="fa fa-face-smile"></i> <!-- Iconcina --> </a> |
PRO
- facile e immediato si tratta di fare solo un copia e incolla
- se vi piace risparmiate 18 crediti tanto costa l'oggetto sul marketplace
CONTRO
- Siete obbligati a creare la struttura come da esempio
- l'oggetto al break point 600px VA NASCOSTO altrimenti non si riesce a farlo stare sopra ai contenuti a risoluzioni minori. Purtroppo Incomedia utilizza classi globali che a volte impattano negativamente sui codici extra.
- L'overlay pur inserendolo non funzionerà.