Creare un bottone che si illumina al passaggio del mouse

Lenigmista

Utente Attivo
17 Set 2015
50
2
8
Salve,
vorrei creare un bottone grande ed arrotondato che si illumina nel bordo e nella scritta, uguale a quello di questo sito:
http://aforismi.meglio.it/film/Saw_-_L'enigmista

(è quello che si trova sotto la locandina del film)

Per caso riuscite a individuare il codice html del bottone e del css esatto? Poi lo modificherò nello stile ma mi servirebbe quello come base per iniziare.
 

WmbertSea

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
28
Ciao, il codice esatto fa riferimento ad un insieme di varie regole css e, in particolare, alla classe .amazon che a te credo non interessi.
Ad ogni modo si può esemplificare con una cosa del genere (ho aggiunto anche un effetto transizione e un effetto bagliore che puoi eliminare se non ti servono):
Codice:
<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      .pulsante{
        color: #000;
        border: 1px solid #CCC;
        background-color: #EFEFEF;
        font: 100%/2 "Lucida Sans","Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,sans-serif;
        text-align: center;
        text-decoration: none;
        border-radius: 10px;
        padding: 12px;
        
        /* transizione morbida */
        transition: .3s ease
      }
      .pulsante:hover{
        border-color: #F90;
        color: #F80;
        
        /* effetto glow (bagliore) */ 
        text-shadow: 0 0 4px #FFF;
        box-shadow: 0 0 3px #FA3, inset 0 0 4px 1px #FFF;
      }
    </style>
  </head>
  <body>
    <a class="pulsante" href="#">Lorem ipsum</a>
  </body>
</html>
 

Lenigmista

Utente Attivo
17 Set 2015
50
2
8
Grazie è proprio quello che ho chiesto, il resto so come farlo.

Però c'è un piccolo problema, se io metto il codice che mi hai postato dentro la parte HTML del post di Wordpress funziona perfettamente, mentre se il css lo incollo su style.css non me lo riconosce e quindi non mi appare più il bordo. Per caso sai qual è il motivo?

Ho anche provato ad aggiungere !important, ma niente, non va. Il fatto è che sarebbe più comodo utilizzare il css solo una volta ed averlo sempre salvato, così da doverlo modificare una sola volta per tutti gli articoli.
 
Ultima modifica:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
.....mentre se il css lo incollo su style.css non me lo riconosce e quindi non mi appare più il bordo. Per caso sai qual è il motivo?
Molto probabilmente nel css di WP c'è delle istruzioni che fanno conflitto o che venendo dopo quella che tu hai incollato, annullano l'effetto!
Ho anche provato ad aggiungere !important, ma niente, non va. Il fatto è che sarebbe più comodo utilizzare il css solo una volta ed averlo sempre salvato, così da doverlo modificare una sola volta per tutti gli articoli.
Per risolvere il problema potresti fare un piccolo foglio di stile solo per il pulsante e richiamarlo per ultimo subito prima della chiusura del tag </head>




.
 

Lenigmista

Utente Attivo
17 Set 2015
50
2
8
dici che ci sia un altra classe chiamata "pulsante"? Questo è impossibile.

comunque ho risolto col plugin header and footer che già usavo per altri motivi.Ho messo lì il css.
 
Ultima modifica:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Questo dimostra ciò che ho detto! C'è qualche coso che annulla il css .pulsante, non deve per forza essere un'altra classe .pulsante! La soluzione che ti avevo proposto mi sembra più logica che aggiungere regole css a un plug-in già strutturato
 

Jonn

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
Io per farlo veloce lo farei con un div:
HTML:
<div class="pulsante">Testo Pulsante</div>
E poi in CSS:
Codice:
.pulsante        {width: 100px; height: 50px; border: 1px solid #DDDDDD; color: #DDDDDD;}
.pulsante:hover  {                            border: 1px solid #FF8800; color: #FF8800;}
Puoi usare anche UL LI dichiarandolo elemento BLOCCO per gestirne dimensioni, forma e stile.
Per fare le stondature agli angoli usi il BORDER RADIUS, è facilissimo.
Per dare l'animazione al pulsante ci aggiungi:
Codice:
transition-property:all; transition-duration: 0.3s; transition-timing-function: ease;
Dove 0.3s indica la durata dell'animazione.
 
Discussioni simili
Autore Titolo Forum Risposte Data
romeocharly Come creare un bottone che permetta il download in base ad un id di mysql PHP 0
M liberia fpdf creare form che al premere al bottone di sumit mi crei il pdf PHP 0
K Creare bottone che apre un URL esterno Flash 8
Cosina Creare bottone delete in form upload PHP 5
Cosina Creare bottone delete in form upload PHP 1
G [PHP] Creare mail con allegato nascosto e bottone di richiamo PHP 0
P Come creare un collegamento a un'altra pagina con un bottone? HTML e CSS 12
I Creare un bottone Flash 1
E Creare un testo trasparente dietro un div HTML e CSS 5
M Creare traccia di download file sul server HTML e CSS 2
A Cerco programmatore/sviluppatore per creare forum Offerte e Richieste di Lavoro e/o Collaborazione 2
L Creare ancore interne alla pagina PHP 1
I Creare un banner temporaneo JavaScript Javascript 0
C Creare Tabella Dati Meteo prelevandoli da dei Tags in un altro foglio PHP 27
simgia Cordova errore quando cerco di emulare o creare la app Sviluppo app per Android 2
U PHP creare un file excel dopo ricerca nel DB PHP 0
A Creare un cronometro PHP 5
G [PHP] Creare script di prenotazione con controllo disponibilità. PHP 7
F Creare elementi html con javascript Javascript 3
Shyson Modificare codice e creare link PHP 0
M Creare un campo input select quantità di un numero intero prelevato dal db PHP 3
L Creare una forma geometrica Photoshop 1
M [Cerco] aiutanti per creare sito Offerte e Richieste di Lavoro e/o Collaborazione 8
S Libreria PHP per creare file dwg o dxf PHP 0
R Come creare sistema Add to homescreen PHP 3
L Creare un countdown con giorno specifico della settimana PHP 3
W Creare link di una dato Classic ASP 0
W creare file .jar Java 2
M Creare con il Vb 2010 Il Classico Notes di Windows Vista Visual Basic 1
MarcoGrazia Creare una password Snippet Javascript 0
J creare pagina php di prenotazione PHP 5
A Creare un modulo di ricerca avanzata con dreamweaver HTML e CSS 0
INTEROPERABILITY Sviluppatrice/formatrice creare APP Offerte e Richieste di Lavoro e/o Collaborazione 0
L Creare una pagina pre-home WordPress 1
G Creare side-bar non visibile da dispositivi mobile HTML e CSS 0
L creare oggetti da una classe tramite un form Javascript 0
Web93 CREARE SITO WEB COMICS CON WORDPRESS WordPress 0
maxnegri Contare sessioni aperte e creare condizione PHP 1
A Come creare pulsante donazione PayPal HTML e CSS 5
L [CERCO] Creare blog su WordPress con tema Divi Offerte e Richieste di Lavoro e/o Collaborazione 3
F Creare un set di date a seconda del frazionamento scelto da inserire in MySQL PHP 6
R [Photoshop] Creare Azione Photoshop 1
F [PHP] creare tabella e tasto cerca PHP 3
A Creare con Javascript un percorso all'interno di uno spazio Javascript 0
B [PHP] Creare PDF dopo inserimento dati form PHP 4
A [HTML] Creare sito web per eLearnig HTML e CSS 2
R Bootstrap 4 - creare una finestra di testo responsive sopra un Carousel jQuery 1
Spenalzo Creare tabelle multiple con Access via VBA MS Access 2
R [PHP] Creare sistema random PHP 3
D [PHP] Consigli su come creare form PHP 1

Discussioni simili