div - generate circle css

Boton circular css

Question

Soy un principiante y muy confundido, como una etiqueta div cuando doy el mismo ancho y alto con el radio del borde: 50% siempre se convierte en círculo. pero con la etiqueta a en caso de que quiera hacer un botón circular, no funciona de esa manera. Esto es cuando trato de hacer clic en un botón de borde de círculo.

<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

Añadir display: block; . Esa es la diferencia entre una etiqueta <div> y una etiqueta <a>

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

Answer 2

Aunque puedo ver una respuesta aceptada y otras grandes respuestas también, pero pensé en compartir lo que hice para resolver este problema (en una sola línea).

CSS (creó una clase):

.circle {
border-radius: 50%;
}

HTML (Agregado esa clase css a mi botón):

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

Tan fácil ¿verdad?

Nota: Lo que realmente hice fue el uso adecuado de las clases iónicas con solo una línea de css.

Vea su propio resultado en este JSFiddle:

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

Answer 3

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;
}

Answer 4

Para la etiqueta div ya existe una display:block propiedades predeterminada display:block dado por el navegador. Para la etiqueta de anclaje no hay propiedad de visualización dada por el navegador. Necesitas agregarle propiedades de visualización. Es por eso que use display:block o display: inline- block . Funcionará.

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

utiliza este css.

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

Answer 6

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

Si quieres referencia a jsfiddle haz click aquí.