Przycisk koła css

Question

Jestem początkujący i bardzo zdezorientowany, jako znacznik div, gdy podaję tę samą szerokość i wysokość z promieniem obramowania: 50% zawsze staje się okręgiem. ale ze znacznikiem a na wypadek, gdy chcę zrobić przycisk koła, to nie działa w ten sposób. To jest, gdy próbuję zrobić kliknięcie przycisku kółka.

<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

Dla div tagu istnieje już domyślna właściwość display:block podany przez przeglądarkę. W przypadku znacznika zakotwiczenia nie jest wyświetlana właściwość podana przez przeglądarkę. Musisz dodać do niego właściwość wyświetlania. Dlatego używaj display:block lub wyświetlacza: inline- block. To będzie działać.

.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

Dodaj display: block;. Taka jest różnica między <div> tagu i <a> tagu

.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>

Jeśli chcesz jsfiddle odniesienia click here

Answer 4

użycie tego css.

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

    } 

Answer 5

Chociaż widzę akceptowaną odpowiedź i inne świetne odpowiedzi, ale myślę o dzieleniu się tym, co zrobiłem, aby rozwiązać ten problem (w jednym wierszu).

CSS (Utworzono klasę):

.circle { 
    border-radius: 50%; 
} 

HTML (Dodano że klasa css do mojego przycisku):

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

tak łatwo, prawda?

Uwaga: To, co faktycznie zrobiłem, to właściwe użycie klas jonowych z jedną linią css.

Zobacz Wynik siebie na tej 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; 
}