在 HTML 中,我们使用 button 标签来创建按钮,但通过使用 CSS 属性,我们可以设置按钮的样式。按钮帮助我们创建用户交互和事件处理。它们是广泛使用的网页元素之一。
在表单提交过程中,为了查看或获取一些信息,我们一般使用按钮。
让我们看看按钮的基本样式。
有多个属性可用于设置按钮元素的样式。让我们一一讨论它们。
正如我们之前讨论过的,此属性用于设置按钮元素的背景颜色。
element { // background-color style }
<!DOCTYPE html> <html> <head> <title> button background Color </title> <style> body{ text-align: center; } button { color:lightgoldenrodyellow; font-size: 30px; } .b1 { background-color: red; } .b2 { background-color: blue; } .b3 { background-color: violet; } </style> </head> <body> <h1>The background-color property.</h1> <button class="b1">Red color button</button> <button class="b2">Blue color button</button> <button class="b3">Violet color button</button> </body> </html>
边界
用于设置按钮的边框。它是border-width、border-color和border-style的简写属性。
element { // border style }
<!DOCTYPE html> <html> <head> <title> button background Color </title> <style> body{ text-align: center; } button { color:lightgoldenrodyellow; font-size: 30px; } .b1 { background-color: red; border:none; } .b2 { background-color: blue; border:5px brown solid; } .b3 { background-color: yellow; color:black; border:5px red groove; } .b4{ background-color:orange; border: 5px red dashed; } .b5{ background-color: gray; border: 5px black dotted; } .b6{ background-color: lightblue; border:5px blue double; } </style> </head> <body> <h1>The border property</h1> <button class="b1">none</button> <button class="b2">solid</button> <button class="b3">groove</button> <button class="b4">dashed</button> <button class="b5">dotted</button> <button class="b6">double</button> </body> </html>
边界半径
它用于制作按钮的圆角。它设置按钮的边框半径。
element { // border-radius property }
<!DOCTYPE html> <html> <head> <title> button background Color </title> <style> body{ text-align: center; } button { color:lightgoldenrodyellow; font-size: 30px; } .b1 { background-color: red; border:none; } .b2 { background-color: blue; border:5px brown solid; border-radius: 7px; } .b3 { background-color: yellow; color:black; border:5px red groove; border-radius: 10px; } .b4{ background-color:orange; border: 5px red dashed; border-radius: 20px; } .b5{ background-color: gray; border: 5px black dotted; border-radius: 30px; } .b6{ background-color: lightblue; border:5px blue double; border-radius: 25px; } </style> </head> <body> <h1>The border-radius property</h1> <h2>Below there is the border name and border-radius</h2> <button class="b1">none</button> <button class="b2">solid 7px</button> <button class="b3">groove 10px</button> <button class="b4">dashed 20px</button> <button class="b5">dotted 30px</button> <button class="b6">double 25px</button> </body> </html>
box-shadow
顾名思义,它用于创建按钮框的阴影。它用于为按钮添加阴影。我们还可以在按钮悬停期间创建阴影。
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
<!DOCTYPE html> <html> <head> <title> button background Color </title> <style> body{ text-align: center; } button { color:lightgoldenrodyellow; font-size: 30px; } .b1{ background-color: lightblue; border:5px red double; border-radius: 25px; color:black; box-shadow : 0 8px 16px 0 black, 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .b2{ background-color: lightblue; border:5px red dotted; color:black; border-radius: 25px; } .b2:hover{ box-shadow : 0 8px 16px 0 black, 0 6px 20px 0 rgba(0, 0, 0, 0.19); } </style> </head> <body> <button class="b1">Shadow on button</button> <button class="b2">Box-shadow on hover</button> </body> </html>
填充
它用于设置按钮填充。
element { // padding style }
让我们用一个插图来理解它。
<!DOCTYPE html> <html> <head> <title> button background Color </title> <style> body{ text-align: center; } button { color:lightgoldenrodyellow; font-size: 30px; } .b1 { background-color: red; border:none; padding: 16px; } .b2 { background-color: blue; border:5px brown solid; padding:15px 30px 25px 40px; } .b3 { background-color: yellow; color:black; border:5px red groove; padding-top:30px; } .b4{ background-color:orange; border: 5px red dashed; padding-bottom:40px; } .b5{ background-color: gray; border: 5px black dotted; padding-left: 40px; } .b6{ background-color: lightblue; border:5px blue double; padding-right: 40px;; } </style> </head> <body> <h1>The padding property</h1> <button class="b1">none</button> <button class="b2">solid</button> <button class="b3">groove</button> <button class="b4">dashed</button> <button class="b5">dotted</button> <button class="b6">double</button> </body> </html>