Kreis Knopf css

Question

Ich bin ein Anfänger und sehr verwirrt, als div-Tag, wenn ich die gleiche Breite und Höhe mit border-Radius geben: 50% wird es immer Kreis. aber mit dem Tag a für den Fall, dass ich einen Kreis Knopf machen möchte, funktioniert es nicht so. Dies ist, wenn ich versuche, einen Kreis-Rahmen-Button anklickbar zu machen.

<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

Für div Tag gibt es bereits Standardeigenschaft ist display:block durch Browser gegeben. Für Anchor-Tags gibt es keine vom Browser angegebene Anzeigeeigenschaft. Sie müssen eine Anzeigeeigenschaft hinzufügen. Verwenden Sie deshalb display:block oder display: inline- block. Es wird klappen.

.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

Hinzufügen display: block;. Das ist der Unterschied zwischen einem <div>-Tag und einem <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>

Wenn Sie diese CSS click here

Answer 4

Verwendung jsfiddle Referenz möchten.

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

    } 

Answer 5

Obwohl ich aber zu teilen, was tat ich dieses Problem zu lösen (in nur einer Zeile) dachte auch eine akzeptierte Antwort und andere große Antworten sehen.

.circle { 
    border-radius: 50%; 
} 

HTML (wurde hinzugefügt, dass CSS-Klasse auf meine Taste):

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

So Easy Rechts

CSS (eine Klasse erstellt)?

Hinweis: Was ich tatsächlich tat, war richtige Verwendung von Ionen Klassen mit nur einer Linie von CSS.

Siehe Ergebnis Sie sich selbst auf dieser 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; 
}