Joomla.it Forum

Joomla! 3 => Joomla! 3 => : prince25 13 Jan 2019, 16:02:57

: [Risolto]Creare un link su un bottone CCS3
: prince25 13 Jan 2019, 16:02:57

Salve,
ho creato un bottone CSS3 come da codice :
<p class="myButton" style="text-align: center;">vai all'articolo di riferimento</p>
<style scoped="scoped" type="text/css"><!--
.myButton {
                -moz-box-shadow: 0px 10px 14px -7px #3e7327;
                -webkit-box-shadow: 0px 10px 14px -7px #3e7327;
                box-shadow: 0px 10px 14px -7px #3e7327;
                background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77b55a), color-stop(1, #72b352));
                background:-moz-linear-gradient(top, #77b55a 5%, #72b352 100%);
                background:-webkit-linear-gradient(top, #77b55a 5%, #72b352 100%);
                background:-o-linear-gradient(top, #77b55a 5%, #72b352 100%);
                background:-ms-linear-gradient(top, #77b55a 5%, #72b352 100%);
                background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77b55a', endColorstr='#72b352',GradientType=0);
                background-color:#77b55a;
                -moz-border-radius:8px;
                -webkit-border-radius:8px;
                border-radius:8px;
                border:2px solid #4b8f29;
                color:#ffffff;
                font-family:Arial;
                font-size:19px;
                font-weight:bold;
                padding:4px 1px;
                text-decoration:none;
                text-shadow:0px 0px 0px #5b8a3c;
}
.myButton:hover {
                background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #72b352), color-stop(1, #77b55a));
                background:-moz-linear-gradient(top, #72b352 5%, #77b55a 100%);
                background:-webkit-linear-gradient(top, #72b352 5%, #77b55a 100%);
                background:-o-linear-gradient(top, #72b352 5%, #77b55a 100%);
                background:-ms-linear-gradient(top, #72b352 5%, #77b55a 100%);
                background:linear-gradient(to bottom, #72b352 5%, #77b55a 100%);
                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#72b352', endColorstr='#77b55a',GradientType=0);
                background-color:#72b352;
}

--></style>
Il bottone č responsive ed occupa tutti i 700 px dell'articolo a schermo intero.
Vorrei realizzare il link non solo sul testo "vai all'articolo di riferimento" ma sull'intero bottone come nel caso di una immagine.
E' possibile?
Grazie

: Re:Creare un link su un bottone CCS3
: Limma 13 Jan 2019, 17:43:23

Prova cosė:

:

<a href="#" class="mybutton">Link Button Test</a>

: Re:Creare un link su un bottone CCS3
: danielecr 13 Jan 2019, 17:49:23

o cosė:

:

<a href="http://google.com">
<p class="myButton" style="text-align: center;">vai all'articolo di riferimento</p>
</a>
Ciao Limma!

: Re:Creare un link su un bottone CCS3
: Limma 13 Jan 2019, 18:39:19

: danielecr  13 Jan 2019, 17:49:23

Ciao Limma!

Ciao danielecr!  :)
Giusto per non lasciare nulla al caso: esempio con i due codici (https://www.disegnareilweb.cloud/articoli/prova) (subito sotto al video).

Queste le classi css che ho usato nel semplice esempio di cui sopra.

:

<style type="text/css">.mybutton {
  background-color: green;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
width: 100%;
}
.mybutton:hover {
  background-color: purple;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}</style>


: Re:[Risolto]Creare un link su un bottone CCS3
: prince25 13 Jan 2019, 19:13:08

Vi ringrazio.. ho risolto
inserendo
display: block;
e text-decoration: none
ho ottenuto un pulsante responsive a tutto schermo nella sua intera immagine, senza alcuna sottolineatura del testo.
Grazie