Pulsante cerchio css

Question

Sono un principiante e molto confuso, come tag div quando fornisco la stessa larghezza e altezza con il raggio del bordo: il 50% diventa sempre un cerchio. ma con il tag a nel caso in cui voglio fare un pulsante cerchio, non funziona in questo modo. Questo è quando cerco di fare clic su un pulsante del bordo del cerchio.

<a class="btn" href="#"><i class="ion-ios-arrow-down"></i></a> 


.btn { 
    height: 300px; 
    width: 300px; 
    border-radius: 50%; 
    border: 1px solid red; 
} 

Answer 1

Per div tag c'è già proprietà di default display:block data dal browser. Per il tag di ancoraggio non c'è la proprietà display data dal browser. È necessario aggiungere la proprietà di visualizzazione ad esso. Ecco perché utilizzare display:block o visualizzare: inline- block. Funzionerà.

.btn { 
 
    display:block; 
 
    height: 300px; 
 
    width: 300px; 
 
    border-radius: 50%; 
 
    border: 1px solid red; 
 
    
 
}

<a class="btn" href="#"><i class="ion-ios-arrow-down"></i></a>

Answer 2

Aggiungi display: block;. Questa è la differenza tra un tag e un <div><a> tag

.btn { 
     display: block; 
     height: 300px; 
     width: 300px; 
     border-radius: 50%; 
     border: 1px solid red; 
    } 

Answer 3

.round-button { 
 
    width:25%; 
 
} 
 
.round-button-circle { 
 
    width: 100%; 
 
    height:0; 
 
    padding-bottom: 100%; 
 
    border-radius: 50%; 
 
    border:10px solid #cfdcec; 
 
    overflow:hidden; 
 
     
 
    background: #4679BD; 
 
    box-shadow: 0 0 3px gray; 
 
} 
 
.round-button-circle:hover { 
 
    background:#30588e; 
 
} 
 
.round-button a { 
 
    display:block; 
 
    float:left; 
 
    width:100%; 
 
    padding-top:50%; 
 
    padding-bottom:50%; 
 
    line-height:1em; 
 
    margin-top:-0.5em; 
 
     
 
    text-align:center; 
 
    color:#e2eaf3; 
 
    font-family:Verdana; 
 
    font-size:1.2em; 
 
    font-weight:bold; 
 
    text-decoration:none; 
 
}

<div class="round-button"><div class="round-button-circle"><a href="http://example.com" class="round-button">Button!!</a></div></div>

Se volete riferimento jsfiddle click here

Answer 4

uso questo css.

.roundbutton{ 
     display:block; 
     height: 300px; 
     width: 300px; 
     border-radius: 50%; 
     border: 1px solid red; 

    } 

Answer 5

Anche se posso vedere una risposta accettata e altri grandi risposte troppo ma ho pensato di condividere quello che ho fatto per risolvere questo problema (in una sola riga).

CSS (creato una classe):

.circle { 
    border-radius: 50%; 
} 

HTML (aggiunta quella classe CSS al mio pulsante):

<a class="button circle button-energized ion-paper-airplane"></a> 

così facile destro?

Nota: Quello che ho effettivamente fatto era un uso corretto delle classi ioniche con una sola riga di css.

Vedere Risultato vostra auto su questo JSFiddle:

https://jsfiddle.net/nikdtu/cnx48u43/

Answer 6

HTML:

<div class="bool-answer"> 
    <div class="answer">Nej</div> 
</div> 

CSS:

.bool-answer { 
    border-radius: 50%; 
    width: 100px; 
    height: 100px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}