MICHELEPISANI.IT
  • Design
  • CSS
  • Articoli
  • Modificare l'aspetto di un bottone facendolo assomigliare ad un link
 

Simulare un link alterando le caratteristiche di un bottone con i CSS

Modificare l'aspetto di un bottone facendolo assomigliare ad un link

bottone che assomiglia ad un link con i css
Marzo 28
07:192015

Tramite i CSS è possibile alterare il design di elementi fino a farli sembrare tutt'altro. Nel breve articolo in oggetto mostrerò come far apparire con il solo utilizzo di una classe CSS un bottone, sia esso di tipo button che submit, come se fosse un link ipertestuale.
La tecnica può trovare spazio in molti contesti, uno di essi può essere il caso in cui ci venga fornita una grafica dove, sotto ad alcuni campi di testo, al posto di un bottone è stato inserito un link per l'invio di dati via ajax quando noi potremo preferire invece un classico form con il submit; in questo modo il bottone del submit può essere cammuffato da link pur continuando a svolgere la sua funzionalità nativa.

Ponendo di voler modificare l'aspetto di un bottone di tipo submit:

<input type="submit" value ="clicca qui" class="likelink" />


Il codice CSS da assegnare alla classe (nell'esempio in questione .likelink) è il seguente:

.likelink {
  background:none!important;
  border:none; 
  padding:0!important;
  font-family:arial,sans-serif;
  color:#069;
  text-decoration:underline;
  cursor:pointer;
}


Il risultato è apprezzabile di seguito:





Dove è facile identificare quale sia il bottone nativo e quello modificato nell'aspetto per farlo assomigliare ad un link.


Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

1 Commento

  1. Maurizio S. sabato 4 aprile 2015 alle ore 00.59

    Simpatica soluzione! Effettivamente i template di oggi offrono sempre meno spazio ai bottoni, anche quelli che a volte sembrano dei veri e propri bottoni si rivelano dei link mascherati

    Rispondi a questo commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele

Ciao domenico,
hai provato con

Michele

Ciao Luca,
hai provato a contattare l'assistenza di Facebook? Attualmente la via migliore …

domenico

ciao, puoi aiutarmi?

ho creato un form che tramite una chiamata mi restituisce una …

Luca

Peccato che fb abbia modificato tutto ed ora sembra non esserci alcun modo per accedere alle …