Bottone css responsive

[moneta173]

Buongiorno a tutti,
chiedo perdono per una domanda che potrebbe risultarvi banale, ma da solo non riesco e ho bisogno del vostro aiuto.

Ho creato un bottone css con un generatore online. Il problema è che mentre da pc si vede bene, da smartphone il bottone risulta spezzato su due righe, con un notevole effetto antiestetico.

Come posso modificare per ottenere un bottone responsive che si adatti in automatico ai vari dispositivi?

Vi ringrazio in anticipo!

[KillerWorm]

Ciao, direi che non è poi così banale ma per poterti consigliare una qualche soluzione bisogna capire in che modo e perché il bottone risulta spezzato. Puoi postare il link dell'eventuale pagina dove si presenta questo problema?

[moneta173]

Ciao, grazie innanzitutto per la risposta. La pagina in questione è https://www.diffusorearomi.it/

Questo è il codice che ho ottenuto con il generatore:

.bottone-amazon {  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 14;
  -moz-border-radius: 14;
  border-radius: 14px;
  font-family: Georgia;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;


}


.bottone-amazon:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

Grazie mille

[KillerWorm]

Ciao, in effetti non si tratta di un vero e proprio bottone ma è realizzato usando un elemento <a>; il problema è dato dal fatto che questo elemento è di tipo in-linea, cioè segue il normale flusso del testo, quindi se il testo viene riportato su più righe (come accade in questo caso quando la dimensione della viewport è ridotta) allora l'elemento stesso si frammenta relativamente a queste righe.

Puoi risolvere semplicemente impostando display:inline-block; per quell'elemento (cioè per il selettore .bottone-amazon). Questo lo forzerà a comportarsi come un elemento block-level (così come può essere un div), contenendo quindi tutto il testo all'interno di un'area rettangolare, ma con la particolarità che viene comunque gestito all'interno del flusso del testo, così come un elemento <img>.

[moneta173]

Grazie mille, sei stato gentilissimo anche per la spiegazione. Ho modificato e risolto