Botão de círculo css

sou um principiante e muito confuso, como uma marca div quando dou a mesma largura e altura com raio-limite: 50% torna-se sempre círculo. mas com a etiqueta a no caso de eu querer fazer um botão círculo, não funciona assim. É quando tento tornar um botão de fronteira círculo clicável.

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


.btn {
  height: 300px;
  width: 300px;
  border-radius: 50%;
  border: 1px solid red;
}
Author: Marko Pacak, 2016-07-12
Source

6 answers

Para a marca div já existe a propriedade por omissão display:block dada pelo navegador. Para a marca de âncora, não existe a propriedade indicada pelo navegador. Você precisa adicionar propriedade de exibição a ele. Por isso, use display:block ou display:inline-block. Vai 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>
 25
Author: Sagar Kodte, 2016-07-12 05:57:02

Usa este css.

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

    }
 4
Author: , 2016-07-27 04:13:39 

.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 quiser a referência jsfiddle Clique aqui

 4
Author: Udhay Titus, 2017-03-28 20:59:02

Adicionar display: block;. Essa é a diferença entre uma marca <div> e uma marca<a> 

.btn {
      display: block;
      height: 300px;
      width: 300px;
      border-radius: 50%;
      border: 1px solid red;
    }
 2
Author: Jack Ducasse, 2016-07-12 05:50:15

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;
}
 2
Author: lesyk, 2017-08-16 10:19:08

Embora eu possa ver uma resposta aceita e outras grandes respostas também, mas pensei em compartilhar o que eu fiz para resolver este problema (em apenas uma linha).

CSS ( criou uma classe ) :

.circle {
    border-radius: 50%;
}

HTML (adicionou a classe css ao meu botão) :

<a class="button circle button-energized ion-paper-airplane"></a>
Tão Fácil, Não É ?

Nota: O que eu realmente fiz foi o uso adequado de classes iônicas com apenas uma linha de css.

Veja o resultado você mesmo neste JSFiddle :

Https://jsfiddle.net/nikdtu/cnx48u43/

 1
Author: Nikhil Maheshwari, 2016-12-10 05:52:11