在 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 中,选择按钮并将按钮的 height
和 width
指定为 200px
。然后,将 border-radius
指定为 50%
或 100px
。
我们输入的 100px``border-radius
是按钮高度和宽度的一半。结果,按钮的每个角将形成一个圆角,其边长半径的一半。
我们可以使用 border-radius
的 50%
值来简化它。因此,我们使用 CSS 的 border-radius
属性构建了一个圆形按钮。
示例代码:
<button> Click here </button>
button {
height: 200px;
width: 200px;
border-radius: 100px;
}
button {
height: 200px;
width: 200px;
border-radius: 50%;
}
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