Кнопка круга css

Я начинаю и очень смущен, как тег div, когда я даю такую же ширину и высоту с радиусом границы: 50% он всегда становится кругом. но с тегом a на случай, если я хочу создать кнопку круга, он не работает таким образом. Это когда я пытаюсь сделать кнопку границы круга нажатой.

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


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

Ответы

Ответ 1

Для тега div уже есть свойство default display:block, указанное браузером. Для метки привязки свойство отображения не отображается браузером. Вам нужно добавить свойство отображения. Для этого используйте display:block или display: inline- block. Он будет работать.

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

Ответ 2

используйте этот css.

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

    }

Ответ 3

Добавить display: block;. То, что разница между тегом <div> и тегом <a>

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

Ответ 4

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

Ответ 5

Хотя я могу видеть принятый ответ и другие отличные ответы, но подумал о том, чтобы поделиться тем, что я сделал, чтобы решить эту проблему (всего в одной строке).

CSS (созданный класс):

.circle {
    border-radius: 50%;
}

HTML (добавлено, что класс css для моей кнопки):

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

Так легко?

Примечание.. На самом деле я действительно использовал ионные классы только с одной строкой css.

См. "Результат" на этом JSFiddle:

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

Ответ 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;
}