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

用CSS 样式做出简单好看的button=

100人浏览   2024-08-22 10:33:19

图0

一、我们开始先做一个按钮，这就是个一般的按钮，要是在xp系统下看，应该会更丑。

图1

图2

二、给它加些样式，直接对button标签加样式。

图3

图4

三、我们再做一个黄色的按钮，只用修改背景色就可以了。

图5

图6

四、用同样的办法再加两个按钮。

图7

图8

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 button{
 border: none;
 /*去掉边框*/
 padding: 15px 30px;
 /* 内边距来控制按钮大小 */
 font-size: 16px;
 /* 字体大小设置 */
 font-family: Arial, 微软雅黑;
 /* 设置字体类型 */
 color: white;
 /* 设置字的颜色 */
 background: #447aa8;
 /* 设置背景色 */
 border-radius: 3px;
 /* 设置四个角为圆角 */
 }
 #bt2{
 background:#f90;
 }
 #bt3{
 background: #363;
 }
 #bt4{
 background: #333;
 }
 </style>
</head>
<body>
 <button>blue按钮</button>
 <button id="bt2">Yellow按钮</button>
 <button id="bt3">Green按钮</button>
 <button id="bt4">Black按钮</button>
</body>
</html>

相关推荐