[HTML] Pulsanti animati per wordpress

[Ragnarr]

Salve a tutti,

premetto che questo è il mio primo intervento in questo forum, quindi scusate l'eventuale imprecisione nelle mie espressioni.

Premetto che non sono un informatico ma soltanto una persona che sta cercando di creare il proprio blog da solo, imparando anche per meccanismo di prova ed errore.

Dedico le ultime ore della giornata a costruire il mio blog cercando di farlo il meglio possibile con le risorse a mia disposizione; adesso passo a spiegarvi il mio problema.

Ho creato una pagina descrittiva del servizio che voglio offrire ed ora, anche per snellire il menù, ho deciso di inserire dei pulsanti con i collegamenti alle pagine che sono legate direttamente all'argomento.
Questi pulsanti però vorrei che fossero delle immagini e che si animino al passaggio del mouse (ad esempio che si rialzino o che si scolorino al passaggio del mouse) insomma vorrei creare un'animazione sul pulsante al passaggio del mouse.
Esistono dei plug-in per questo? oppure è possibile farlo in altro modo?

Grazie per l'attenzione e per le eventuali risposte!

 

[Max 1]

È possinile farlo con i css3. Non so se esiste dei plug-in per WP perché non conosco a fondo WP, ma se vuoi ti sposto nella sezione adatta

 

[Ragnarr]

Ciao! Si certo che per me va bene! Grazie!

 

[Ragnarr]

È possinile farlo con i css3. Non so se esiste dei plug-in per WP perché non conosco a fondo WP, ma se vuoi ti sposto nella sezione adatta

Certo che puoi! Grazie!

 

[glm2006ITALY]

Esiste un plugin molto valido e free:
https://srd.wordpress.org/plugins/buttons-x/

 

[Ragnarr]

Esiste un plugin molto valido e free:
https://srd.wordpress.org/plugins/buttons-x/

Ciao!!!! Grazie! Ho provato il plug-in che mi hai consigliato! E' molto simile ad un'altro che avevo trovato "Image Hover Effect" per entrambi ovviamente per fare qualcosa di carino è necessaria la versione pro! Colgo l'occasione per chiederti se mi conviene acquistare la versione pro oppure lasciare perdere.
In ogni caso il tuo suggerimento mi ha dato visuale su molti plug-in interessanti! Grazie di cuore!

 

[glm2006ITALY]

Prova a guardare anche elementor: è un page builder estremamente potente, leggero che fa un po'di tutto!

 

[Max 1]

E provare con i css3 prima di spendere soldi?

 

[Ragnarr]

ok! Adesso sono proprio in wordpress ad aggiornare un pò di pagine, lo scarico e ti faccio sapere! Grazie!

 

[Ragnarr]

E provare con i css3 prima di spendere soldi?

e come funziona?

 

[Max 1]

Non ha un funzionamento specifico! Si crea un'animazione attraverso un codice CSS3. Ma sai cosa sono?

 

[Ragnarr]

Non ha un funzionamento specifico! Si crea un'animazione attraverso un codice CSS3. Ma sai cosa sono?

In realtà non proprio. So che si parla di codici ma non conosco nè l'utilizzo nè il codice

 

[Max 1]

Allora diventa complicato! Comunque che tipo di animazione vorresti fare?

 

[Ragnarr]

Allora diventa complicato! Comunque che tipo di animazione vorresti fare?

posso inserire il link della casa madre per dare l'idea del tipo di pulsante che voglio creare?

 

[Max 1]

Si!

 

[Ragnarr]

Si!

https://it.eipass.com/
questo è il link; i pulsanti che vorrei creare sono quelli tipo vicino allo slideshow

 

[Ragnarr]

https://it.eipass.com/
questo è il link; i pulsanti che vorrei creare sono quelli tipo vicino allo slideshow

oppure come stanno alla fine della pagina prima del banner finale

 

[Max 1]

<style type="text/css">
.box {
    position: relative;
    margin: 0px;
    padding: 0px;
    height: 300px;
    width: 300px;
}
.testo {
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    margin: 0px;
    padding: 20px;
    height: 260px;
    width: 260px;
    top: 0;
    left: 0;
    visibility: hidden;
    text-align: center;
}
.box:hover .testo {
    visibility: visible;
}
</style>

<div class="box">
    <img src="tua-immagine.jpg" width="300" height="300" alt=""/>
    <div class="testo" onClick="document.location.href='tua-pagina.html';">
        Inserite qui il Commento dell'immagine
    </div>
</div>

 

[Ragnarr]

<style type="text/css">
.box {
    position: relative;
    margin: 0px;
    padding: 0px;
    height: 300px;
    width: 300px;
}
.testo {
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    margin: 0px;
    padding: 20px;
    height: 260px;
    width: 260px;
    top: 0;
    left: 0;
    visibility: hidden;
    text-align: center;
}
.box:hover .testo {
    visibility: visible;
}
</style>

<div class="box">
    <img src="tua-immagine.jpg" width="300" height="300" alt=""/>
    <div class="testo" onClick="document.location.href='tua-pagina.html';">
        Inserite qui il Commento dell'immagine
    </div>
</div>

ed eccomi qui! Di nuovo alla tastiera! dove dovrei inserire questo codice? Grazie anticipatamente!!!

 

[Ragnarr]

Prova a guardare anche elementor: è un page builder estremamente potente, leggero che fa un po'di tutto!

Plug-in scaricato! Molto semplice ed intuitivo! Sono riuscito in qualche modo a sistemare il tutto! Ovviamente io punto ad imparare di più e a creare queste cose senza il builder! Grazie!