CSS3 基础（009_按钮）
来源：互联网 发布：手机桌面图标软件 编辑：程序博客网 时间：2024/05/18 00:48
原始网址：http://www.w3schools.com/css/css3_buttons.asp
翻译：
CSS 按钮（CSS Buttons）
学习使用 CSS 如何样式化按钮。
基本按钮样式（Basic Button Styling）
.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px;}<!DOCTYPE html><html><head><meta charset="utf-8"><style>.btn { background-color: #4caf50; border: medium none; color: #ffffff; font-size: 16px; margin: 16px 0 !important; padding: 15px 32px; text-align: center; text-decoration: none; transition-duration: 0.4s;}</style></head><body> <p> <button style="margin-right: 25px;">Default Button</button> <button class="btn w3-green">CSS Button</button> </p></body></html>按钮颜色（Button Colors）
使用 属性改变按钮的背景色：
.button1 {background-color: #4CAF50;} /* Green */.button2 {background-color: #008CBA;} /* Blue */.button3 {background-color: #f44336;} /* Red */.button4 {background-color: #e7e7e7; color: black;} /* Gray */.button5 {background-color: #555555;} /* Black */<!DOCTYPE html><html><head><style>.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;}.button2 {background-color: #008CBA;} /* Blue */.button3 {background-color: #f44336;} /* Red */.button4 {background-color: #e7e7e7;color: black;} /* Gray */.button5 {background-color: #555555;} /* Black */</style></head><body> <h2>Button Colors</h2> <p>Change the background color of a button with the background-color property:</p> <button class="button">Green</button> <button class="button button2">Blue</button> <button class="button button3">Red</button> <button class="button button4">Gray</button> <button class="button button5">Black</button></body></html>使用 font-size 属性改变按钮的大小：
.button1 {font-size: 10px;}.button2 {font-size: 12px;}.button3 {font-size: 16px;}.button4 {font-size: 20px;}.button5 {font-size: 24px;}<!DOCTYPE html><html><head><style>.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; margin: 4px 2px; cursor: pointer;}.button1 {font-size: 10px;}.button2 {font-size: 12px;}.button3 {font-size: 16px;}.button4 {font-size: 20px;}.button5 {font-size: 24px;}</style></head><body> <h2>Button Sizes</h2> <p>Change the font size of a button with the font-size property:</p> <button class="button button1">10px</button> <button class="button button2">12px</button> <button class="button button3">16px</button> <button class="button button4">20px</button> <button class="button button5">24px</button></body></html>使用 padding 属性改变按钮的内边距：
.button1 {padding: 10px 24px;}.button2 {padding: 12px 28px;}.button3 {padding: 14px 40px;}.button4 {padding: 32px 16px;}.button5 {padding: 16px;}<!DOCTYPE html><html><head><style>.button { background-color: #4CAF50; /* Green */ border: none; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;}.button1 {padding: 10px 24px;}.button2 {padding: 12px 28px;}.button3 {padding: 14px 40px;}.button4 {padding: 32px 16px;}.button5 {padding: 16px;}</style></head><body> <h2>Button Sizes</h2> <p>Change the padding of a button with the padding property:</p> <button class="button button1">10px 24px</button> <button class="button button2">12px 28px</button> <button class="button button3">14px 40px</button> <button class="button button4">32px 16px</button> <button class="button button5">16px</button></body></html>圆角按钮（Rounded Buttons）
使用 border-radius 属性给按钮添加圆角：
.button1 {border-radius: 2px;}.button2 {border-radius: 4px;}.button3 {border-radius: 8px;}.button4 {border-radius: 12px;}.button5 {border-radius: 50%;}<!DOCTYPE html><html><head><style>.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;}.button1 {border-radius: 2px;}.button2 {border-radius: 4px;}.button3 {border-radius: 8px;}.button4 {border-radius: 12px;}.button5 {border-radius: 50%;}</style></head><body> <h2>Rounded Buttons</h2> <p>Add rounded corners to a button with the border-radius property:</p> <button class="button button1">2px</button> <button class="button button2">4px</button> <button class="button button3">8px</button> <button class="button button4">12px</button> <button class="button button5">50%</button></body></html>按钮边框色（Colored Button Borders）
使用 border 属性给按钮添加边框色：
.button1 { background-color: white; color: black; border: 2px solid #4CAF50; /* Green */}...<!DOCTYPE html><html><head><style>.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;}.button1 { background-color: white; color: black; border: 2px solid #4CAF50;}.button2 { background-color: white; color: black; border: 2px solid #008CBA;}.button3 { background-color: white; color: black; border: 2px solid #f44336;}.button4 { background-color: white; color: black; border: 2px solid #e7e7e7;}.button5 { background-color: white; color: black; border: 2px solid #555555;}</style></head><body> <h2>Colored Button Borders</h2> <p>Use the border property to add a border to the button:</p> <button class="button button1">Green</button> <button class="button button2">Blue</button> <button class="button button3">Red</button> <button class="button button4">Gray</button> <button class="button button5">Black</button></body></html>按钮悬浮效果（Hoverable Buttons）
当移动鼠标指针悬停按钮之上的时候，使用 :hover 选择器改变按钮式样。
提示：使用 transition-duration 属性可确定 "hover" 效果的速率：
.button { -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s;}.button:hover { background-color: #4CAF50; /* Green */ color: white;}...<!DOCTYPE html><html><head><style>.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; cursor: pointer;}.button1 { background-color: white; color: black; border: 2px solid #4CAF50;}.button1:hover { background-color: #4CAF50; color: white;}.button2 { background-color: white; color: black; border: 2px solid #008CBA;}.button2:hover { background-color: #008CBA; color: white;}.button3 { background-color: white; color: black; border: 2px solid #f44336;}.button3:hover { background-color: #f44336; color: white;}.button4 { background-color: white; color: black; border: 2px solid #e7e7e7;}.button4:hover { background-color: #e7e7e7;}.button5 { background-color: white; color: black; border: 2px solid #555555;}.button5:hover { background-color: #555555; color: white;}</style></head><body> <h2>Hoverable Buttons</h2> <p>Use the :hover selector to change the style of the button when you move the mouse over it.</p> <p> <strong>Tip:</strong> Use the transition-duration property to determine the speed of the "hover" effect: </p> <button class="button button1">Green</button> <button class="button button2">Blue</button> <button class="button button3">Red</button> <button class="button button4">Gray</button> <button class="button button5">Black</button></body></html>按钮阴影（Shadow Buttons）
使用 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);}<!DOCTYPE html><html><head><style>.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s;}.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);}</style></head><body> <h2>Shadow Buttons</h2> <p>Use the box-shadow property to add shadows to the button:</p> <button class="button button1">Shadow Button</button> <button class="button button2">Shadow on Hover</button></body></html>按钮不可用（Disabled Buttons）
使用 opacity 属性给按钮添加透明效果（创建 "disabled" 外观）。
提示：你也可以添加值为 "not-allowed" 的 cursor 属性，当你的鼠标指针悬停于按钮之上的时候，将呈现 “no parking sign”：
.disabled { opacity: 0.6; cursor: not-allowed;}<!DOCTYPE html><html><head><style>.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;}.disabled { opacity: 0.6; cursor: not-allowed;}</style></head><body> <h2>Disabled Buttons</h2> <p>Use the opacity property to add some transparency to the button (make it look disabled):</p> <button class="button">Normal Button</button> <button class="button disabled">Disabled Button</button></body></html>按钮宽度（Button Width）
默认情况下，按钮的大小由文本内容确定（与之宽度相当）。使用 width 属性改变按钮的宽度：
.button1 {width: 250px;}.button2 {width: 50%;}.button3 {width: 100%;}<!DOCTYPE html><html><head><style>.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;}.button1 {width: 250px;}.button2 {width: 50%;}.button3 {width: 100%;}</style></head><body> <h2>Button Width</h2> <p>Use the width property to change the width of the button:</p> <p> <strong>Tip:</strong> Use pixels if you want to set a fixed width and use percent for responsive buttons (e.g. 50% of its parent element). Resize the browser window to see the effect. </p> <button class="button button1">250px</button> <br> <button class="button button2">50%</button> <br> <button class="button button3">100%</button></body></html>Button Groups
去掉 margins，对每个按钮再添加 float:left 以创建 button group：
.button { float: left;}<!DOCTYPE html><html><head><style>.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; float: left;}.button:hover { background-color: #3e8e41;}</style></head><body> <h2>Button Groups</h2> <p>Remove margins and float the buttons to create a button group:</p> <button class="button">Button</button> <button class="button">Button</button> <button class="button">Button</button> <button class="button">Button</button> <p style="clear: both"> <br>Remember to clear floats after, or else will this p element also float next to the buttons. </p></body></html>Bordered Button Groups
使用 border 属性创建 bordered button group：
.button { float: left; border: 1px solid green}<!DOCTYPE html><html><head><style>.button { background-color: #4CAF50; /* Green */ border: 1px solid green; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; float: left;}.button:hover { background-color: #3e8e41;}</style></head><body><h2>Bordered Button Group</h2><p>Add borders to create a bordered button group:</p><button class="button">Button</button><button class="button">Button</button><button class="button">Button</button><button class="button">Button</button><p style="clear:both"><br>Remember to clear floats after, or else will this p element also float next to the buttons.</p></body></html>带有动画效果的按钮（Animated Buttons）
<!-- 悬停时添加箭头效果 --><!DOCTYPE html><html><head><meta charset="utf-8"><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: "»"; 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> <button class="button" style="vertical-align: middle"><span>Hover </span></button></body></html><!-- 点击时添加涟漪效果 --><!DOCTYPE html><html><head><style>.button { position: relative; background-color: #4CAF50; border: none; font-size: 28px; color: #FFFFFF; padding: 20px; width: 200px; text-align: center; -webkit-transition-duration: 0.4s; /* Safari */ 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> <button class="button">Click Me</button></body></html><!-- 点击时添加按压效果 --><!DOCTYPE html><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: #4CAF50; 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 Buttons - "Pressed Effect"</h2> <button class="button">Click Me</button></body></html> 0 0
- CSS3 基础（009_按钮）
- CSS3 基础（001_圆角）
- CSS3 基础（002_边框图）
- CSS3 基础（003_背景）
- CSS3 基础（004_文本）
- CSS3 基础（006_过渡）
- CSS3 基础（007_动画）
- CSS3 基础（008_图片）
- CSS3 基础（011_用户接口）
- CSS3 基础（014_媒体查询）
- CSS3 基础（010_多列布局）
- CSS3 基础（015_媒体查询 - 示例）
- Jquery基础_点击按钮使div背景变色_根据class_根据标签_所有都变色_一直动画_实例（二）
- CSS3 按钮悬停（Hover）效果全集
- CSS3实现幽灵按钮（下）
- HTML-CSS3基础（二）
- css3动画（annimate）基础
- CSS3基础
- 构建自定义的Camera应用程序
- 轻松看懂机器学习十大常用算法
- Chrome 控制台console的用法
- HDU 5979 Convex（数学）
- 34. Search for a Range
- CSS3 基础（009_按钮）
- NSNumber的大小比较
- ContentService源码分析
- bit，byte，编码、解码、字符集的总结
- jquery mobile界面数据刷新
- Spark快速安装与简单入门_Ubuntu14.04 64bitx
- 报错：java.util.Map is an interface, and JAXB can't handle interfaces.
- ELF Linker学习篇（四）——初始化
- js跨域的几种解决方案
