如何在 Semantic 中使按钮真正成为圆形 UI

Question

如果我将 circular class 添加到一个带有文字的按钮中，该按钮实际上并没有变成一个圆圈，只是一个圆角矩形：

如何让按钮变成圆形？我希望它的直径和上面的一样，但是在顶部和底部填充更多，这样它看起来像一个圆。

我的 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>

编辑：或者，制作一个带有文本的圆形按钮的简单方法是什么？我并不坚决使用语义 UI.

Answer 1

要使按钮成为圆形，您必须使其高度与宽度完全相同。由于按钮元素是行内块，它的宽度基于它的内容，所以你需要一点 javascript 来设置宽度作为该元素的 line-height。

我在循环中添加了一个新的 class 并设置了 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>

如何在 Semantic 中使按钮真正成为圆形 UI

How to make a button truly circular in Semantic UI

html

css

semantic-ui