在 CSS 中创建圆形按钮

Sushant Poudel 2023年2月20日 2022年4月20日
在 CSS 中创建圆形按钮

本文将介绍一种在 CSS 中创建圆形按钮的方法。

在 CSS 中使用 border-radius 属性创建圆形按钮

我们可以使用 border-radius 属性在 CSS 中创建一个圆形按钮。该属性通过将半径添加到元素的角来为选定元素创建圆角。

border-radius 属性采用一到四个值作为选项。我们将研究下面的例子。

border-radius 有四个值,初始值适用于左上角,第二个适用于右上角,第三个值适用于右下角,最终值适用于底部-左角。

border-radius: 12px 50px 20px 5px

对于三个值,初始值应用于左上角,第二个值应用于右上角和左下角,最终值应用于右下角。

border-radius: 12px 50px 20px

初始值适用于两个值中的左上角和右下角,后者适用于右上角和左下角。

border-radius: 12px 50px

当设置单个半径时,它会形成一个圆角,因为它适用于元素的所有角。

border-radius: 12px

我们可以使用 border-radius 属性来创建一个完美的圆形按钮,方法是将 border-radius 提供为按钮高度和宽度的一半。我们可以使用一个值 border-radius 来进行演示。

例如,使用 HTML 中的 button 标签创建一个按钮。在按钮内写下文本点击这里

现在在 CSS 中,选择按钮并将按钮的 heightwidth 指定为 200px。然后,将 border-radius 指定为 50%100px

我们输入的 100px``border-radius 是按钮高度和宽度的一半。结果,按钮的每个角将形成一个圆角,其边长半径的一半。

我们可以使用 border-radius50%值来简化它。因此,我们使用 CSS 的 border-radius 属性构建了一个圆形按钮。

示例代码:

<button> Click here </button>
button {
 height: 200px;
 width: 200px;
 border-radius: 100px;
}
button {
 height: 200px;
 width: 200px;
 border-radius: 50%;
}
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn