a href όλο το κουμπί clickable.

[konstantinos_1987]

Καλησπέρα.Προσπαθώ να δημιουργήσω 2 συνδέσμους href και να τους βάλω κλάσεις.πχ:

<a href="redirect to" class="btn btn--small">click me</a>

με css 
.btn {
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: #FFF;
  font-size: 1.19rem;
  padding: 12px 24px;
  border: none;
  outline: none;
}

ενώ δημιουργείται μια χαρά το κουμπί,δεν είναι clickable.είναι μόνο ο σύνδεσμος.
αν προσθέσω τον κώδικα 

.site-header__a {
    display:inline block;
   
    
}

<a href="redirect" class="btn btn--small site-header__a">click me</a>

ενώ όλο το κουμπί γίνεται clickable,πιάνει από τη θέση του μέχρι το τέλος της οθόνης.καμία ιδέα πώς θα μπορούσα να το κάνω να μεγαλώνει ή να μικραίνει ανάλογα με το περιεχόμενο,ή να μείνει στο μέγεθος που ήταν ήδη;;

[ajaxmonkey4hire]

<a href="https://www.google.com" style="min-width:20em;min-height:2em;background-color:#f00;display:inline-block;"></a>

 

Επεξ/σία 16 Ιανουαρίου 2019 από ajaxmonkey4hire

[konstantinos_1987]

5 ώρες πριν, ajaxmonkey4hire είπε

<a href="https://www.google.com" style="min-width:20em;min-height:2em;background-color:#f00;display:inline-block;"></a>

καλησπέρα.τώρα όμως χάνει τη μορφοποίηση,πχ το κείμενο δεν είναι κεντραρισμένο,το βγάζει υπογραμμισμένο..

[ajaxmonkey4hire]

3 ώρες πριν, konstantinos_1987 είπε

καλησπέρα.τώρα όμως χάνει τη μορφοποίηση,πχ το κείμενο δεν είναι κεντραρισμένο,το βγάζει υπογραμμισμένο..

<a href="https://www.google.com" style="text-align:center;text-decoration:none;padding:1em;min-width:10em;min-height:2em;background-color:#f00;display:inline-block;">test test</a>