前端必知必会-CSS 按钮

文章目录

CSS 按钮Buttons

了解如何使用 CSS 设置按钮样式。

基本按钮样式

在这里插入图片描述

示例

.button{background-color: #04AA6D;/* 绿色 */border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;}

按钮颜色

绿色蓝色红色灰色黑色

使用 background-color 属性更改按钮的背景颜色：

示例

.button1{background-color: #04AA6D;}/* 绿色 */.button2{background-color: #008CBA;}/* 蓝色 */.button3{background-color: #f44336;}/* 红色 */.button4{background-color: #e7e7e7;color: black;}/* 灰色 */.button5{background-color: #555555;}/* 黑色 */

按钮大小

10px 12px 16px 20px 24px

使用 font-size 属性更改按钮的字体大小：

示例

.button1{font-size: 10px;}.button2{font-size: 12px;}.button3{font-size: 16px;}.button4{font-size: 20px;}.button5{font-size: 24px;}

使用 padding 属性更改按钮的填充：

10px 24px 12px 28px 14px 40px 32px 16px 16px

示例

.button1{padding: 10px 24px;}.button2{padding: 12px 28px;}.button3{padding: 14px 40px;}.button4{padding: 32px 16px;}.button5{padding: 16px;}

圆角按钮

2px 4px 8px 12px 50%

使用 border-radius 属性为按钮添加圆角：

示例

.button1{border-radius: 2px;}.button2{border-radius: 4px;}.button3{border-radius: 8px;}.button4{border-radius: 12px;}.button5{border-radius: 50%;}

彩色按钮边框

绿色蓝色红色灰色黑色

使用 border 属性为按钮添加彩色边框：

示例

.button1{background-color: white;color: black;border: 2px solid #04AA6D;/* 绿色 */}
...

可悬停按钮

绿色蓝色红色灰色黑色绿色蓝色红色灰色黑色

使用 :hover 选择器在将鼠标移到按钮上时更改按钮的样式。

提示：使用 transition-duration 属性确定“悬停”效果的速度：

示例

.button{transition-duration: 0.4s;}.button:hover{background-color: #04AA6D;/* 绿色 */color: white;}
...

阴影按钮

阴影按钮悬停时阴影
使用 box-shadow 属性为按钮添加阴影：
在这里插入图片描述

示例

.button1{box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);}.button2:hover{box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);}

已禁用按钮

普通按钮已禁用按钮

使用 opacity 属性为按钮添加透明度（创建“已禁用”外观）。

提示：您还可以添加值为“not-allowed”的 cursor 属性，这样当您将鼠标悬停在按钮上时，将显示“禁止停车标志”：

示例

.disabled{opacity: 0.6;cursor: not-allowed;}

按钮宽度

250px 50% 100%

默认情况下，按钮的大小由其文本内容决定（与内容一样宽）。使用 width 属性可更改按钮的宽度：

示例

.button1{width: 250px;}.button2{width: 50%;}.button3{width: 100%;}

按钮组

ButtonButtonButtonButton

删除边距并为每个按钮添加 float:left 以创建按钮组：

示例

.button{float: left;}

带边框的按钮组

按钮按钮按钮按钮按钮

使用 border 属性创建带边框的按钮组：

示例

.button{float: left;border: 1px solid green;}

垂直按钮组

按钮按钮按钮按钮

使用 display:block 而不是 float:left 将按钮分组到彼此下方，而不是并排：

示例

.button{display: block;}

图像上的按钮

雪动画按钮

<!DOCTYPEhtml><html><head><style>.container{position: relative;width: 100%;max-width: 400px;}.container img{width: 100%;height: auto;}.container .btn{position: absolute;top: 50%;left: 50%;transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);background-color: #f1f1f1;color: black;font-size: 16px;padding: 16px 30px;border: none;cursor: pointer;border-radius: 5px;text-align: center;}.container .btn:hover{background-color: black;color: white;}</style></head><body><h2>Button on Image</h2><p>Add a button on an image:</p><divclass="container"><imgsrc="img_lights.jpg"alt="Snow"style="width:100%"><buttonclass="btn">Button</button></div></body></html>

示例
悬停时添加箭头：

<!DOCTYPEhtml><html><head><style>.button{display: inline-block;border-radius: 4px;background-color: #f4511e;border: none;color: #FFFFFF;text-align: center;font-size: 28px;padding: 20px;width: 200px;transition: all 0.5s;cursor: pointer;margin: 5px;}.button span{cursor: pointer;display: inline-block;position: relative;transition: 0.5s;}.button span:after{content:'\00bb';position: absolute;opacity: 0;top: 0;right: -20px;transition: 0.5s;}.button:hover span{padding-right: 25px;}.button:hover span:after{opacity: 1;right: 0;}</style></head><body><h2>Animated Button</h2><buttonclass="button"style="vertical-align:middle"><span>Hover </span></button></body></html>

示例
单击时添加“按下”效果：
在这里插入图片描述

<!DOCTYPEhtml><html><head><style>.button{display: inline-block;padding: 15px 25px;font-size: 24px;cursor: pointer;text-align: center;text-decoration: none;outline: none;color: #fff;background-color: #04AA6D;border: none;border-radius: 15px;box-shadow: 0 9px #999;}.button:hover{background-color: #3e8e41}.button:active{background-color: #3e8e41;box-shadow: 0 5px #666;transform:translateY(4px);}</style></head><body><h2>Animated Button - "Pressed Effect"</h2><buttonclass="button">Click Me</button></body></html>

单击
示例
悬停时淡入：
在这里插入图片描述

<!DOCTYPEhtml><html><head><metaname="viewport"content="width=device-width, initial-scale=1"><style>.button{background-color: #f4511e;border: none;color: white;padding: 16px 32px;text-align: center;font-size: 16px;margin: 4px 2px;opacity: 0.6;transition: 0.3s;display: inline-block;text-decoration: none;cursor: pointer;}.button:hover{opacity: 1}</style></head><body><h2>Animated Button - Fade in Effect</h2><buttonclass="button">Hover Over Me</button></body></html>

淡入
示例
单击时添加“涟漪”效果：
在这里插入图片描述

<!DOCTYPEhtml><html><head><style>.button{position: relative;background-color: #04AA6D;border: none;font-size: 28px;color: #FFFFFF;padding: 20px;width: 200px;text-align: center;transition-duration: 0.4s;text-decoration: none;overflow: hidden;cursor: pointer;}.button:after{content:"";background: #f1f1f1;display: block;position: absolute;padding-top: 300%;padding-left: 350%;margin-left: -20px !important;margin-top: -120%;opacity: 0;transition: all 0.8s
}.button:active:after{padding: 0;margin: 0;opacity: 1;transition: 0s
}</style></head><body><h2>Animated Button - Ripple Effect</h2><buttonclass="button">Click Me</button></body></html>

总结

本文介绍了CSS 按钮的使用，如有问题欢迎私信和评论

标签：前端 css

本文转载自: https://blog.csdn.net/qq_24018193/article/details/141924253
版权归原作者 编程岁月 所有，如有侵权，请联系我们删除。