服务器之家
您的位置： 首页 编程语言 css

CSS美化button按钮样式

100人浏览   2024-08-22 08:04:24 
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <style>
 /*button样式*/
 .global-button {
 width: 75px;
 height: 30px;
 background: #3094D0;
 cursor: pointer;
 border: 1px solid transparent;
 border-radius: 3px;
 color: white;
 }
 button:nth-child(2) {
 background: red;
 }
 </style>
</head>
<body>
<button type="button" class="global-button" >登录</button>
<button type="button" class="global-button" >取消</button>
</body>
</html>

效果图

附带一张登录效果图：如下

登录效果图

相关推荐