Как сделать кнопку действительно круговой в семантическом UI

Question

Если я добавить circular класс к кнопке со словами в нем, кнопка на самом деле не стать круг, просто прямоугольник с закругленными краями:

Как заставить кнопку стать кругом? Я хочу, чтобы его диаметр был таким же, как у этого выше, но он больше заполняет верх и низ, чтобы он выглядел как круг.

Мой HTML в настоящее время выглядит следующим образом:

<div id="my-button" class="ui circular animated button" tabindex="0"> 
    <div class="visible content">A button</div> 
    <div class="hidden content"> 
     <i class="right arrow icon"></i> 
    </div> 
</div> 

EDIT: В качестве альтернативы, что было бы простой способ сделать круглую кнопку с текстом в нем? Я не могу использовать Semantic UI.

Answer 1

Чтобы сделать кнопку круглой, вы должны иметь ее высоту точно так же, как и ее ширину. Поскольку элемент кнопки является встроенным блоком, его ширина основывается на его содержимом, поэтому вам нужно немного javascript, чтобы установить ширину как line-height этого элемента.

Я добавил новый класс в циркуляцию, а также установил высоту линии content (чтобы убедиться, что стрелка также центрирована).

Проверить этот пример:

$('.full-circle').each(function() { 
 
    $(this).css('lineHeight', $(this).width() + 'px'); 
 
});

.full-circle.ui.animated.button .hidden.content { 
 
    line-height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.css" /> 
 
<div id="my-button" class="ui circular animated button full-circle" tabindex="0"> 
 
    <div class="visible content">A button</div> 
 
    <div class="hidden content"> 
 
     <i class="right arrow icon"></i> 
 
    </div> 
 
</div>