Creare un bottone che si illumina al passaggio del mouse

Lenigmista · 20 Nov 2015

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 · 20 Nov 2015

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 · 20 Nov 2015

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.

Max 1 · 20 Nov 2015

Lenigmista ha scritto:
.....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 · 20 Nov 2015

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.

Max 1 · 20 Nov 2015

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 · 24 Nov 2015

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.

Cerca

Cerca

Creare un bottone che si illumina al passaggio del mouse

Lenigmista

Utente Attivo

WmbertSea

Moderatore

Lenigmista

Utente Attivo

Max 1

Super Moderatore

Lenigmista

Utente Attivo

Max 1

Super Moderatore

Jonn

Utente Attivo

Discussioni simili