- W3.CSS教程
- W3.CSS - 主页
- W3.CSS - 概述
- W3.CSS - 环境设置
- W3.CSS - 容器
- W3.CSS - 代码着色
- W3.CSS - 卡片
- W3.CSS - 响应式设计
- W3.CSS - 网格
- W3.CSS - 表单
- W3.CSS - 按钮
- W3.CSS - 工具提示
- W3.CSS - 模态对话框
- W3.CSS - 表格
- W3.CSS - 列表
- W3.CSS - 图像
- W3.CSS - 图标
- W3.CSS - 颜色
- W3.CSS - 导航
- W3.CSS - 实用程序
- W3.CSS 有用资源
- W3.CSS - 快速指南
- W3.CSS - 有用的资源
- W3.CSS - 讨论
W3.CSS - 按钮
W3.CSS 有一个非常漂亮且响应灵敏的 CSS,用于自定义按钮的外观。使用以下 CSS -
先生。没有。 | 类名和描述 |
---|---|
1 | w3按钮 代表一个标准按钮。也可用于将链接设置为按钮样式。 |
2 | w3-btn-浮动 表示设计为圆形的浮动按钮。 |
3 | w3-btn-浮动-大 代表一个大的浮动按钮。 |
例子
w3css_buttons.htm
<html> <head> <title>The W3.CSS Forms</title> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css"> </head> <body class = "w3-container"> <h2>Standard Buttons</h2> <button class = "w3-btn">Click Me</button> <button class = "w3-btn w3-teal">Click Me</button> <button class = "w3-btn w3-disabled">I am disabled</button> <h2>Links as Buttons</h2> <a class = "w3-btn">Link</a> <a class = "w3-btn w3-teal">Link</a> <a class = "w3-btn w3-disabled">Disabled Link</a> <h2>Floating Buttons</h2> <a class = "w3-btn-floating">+</a> <a class = "w3-btn-floating w3-teal">+</a> <a class = "w3-btn-floating w3-disabled">+</a> <h2>Large Floating Buttons</h2> <a class = "w3-btn-floating-large">+</a> <a class = "w3-btn-floating-large w3-teal">+</a> <a class = "w3-btn-floating-large w3-disabled">+</a> </body> </html>
结果
验证结果。