admin管理员组文章数量:1794759
JS
文章目录
- 1.常规按钮
- 2.专业按钮
- 2.1.三维效果按钮
- 2.2.突起样式的按钮
- 2.3.为按钮中的文字赋予扁平效果的阴影
- 2.4.按钮周围有一圈光晕效果
- 2.4.矩形按钮
- 2.5.一组相关的按钮被并排排列
- 2.6.堆叠按钮
- 2.7.额外的环绕效果
- 2.8.表单按钮
- 2.9.各种文字样式
- 3.作者答疑
常用的矩形圆角按钮。如下运行的基本html5代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob)</title> <style> .button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } </style> </head> <body> <button>默认按钮</button> <a href="#" class="button">链接按钮</a> <button class="button">按钮</button> <input type="button" class="button" value="输入框按钮"> </body> </html>不同颜色的按钮代码：
.button1 {background-color: #4CAF50;} /* 绿色 */ .button2 {background-color: #008CBA;} /* 蓝色 */ .button3 {background-color: #f44336;} /* 红色 */ .button4 {background-color: #e7e7e7; color: black;} /* 灰色 */ .button5 {background-color: #555555;} /* 黑色 */不同文字的按钮代码:
.button1 {font-size: 10px;} .button2 {font-size: 12px;} .button3 {font-size: 16px;} .button4 {font-size: 20px;} .button5 {font-size: 24px;}不同圆角的代码:
.button1 {border-radius: 2px;} .button2 {border-radius: 4px;} .button3 {border-radius: 8px;} .button4 {border-radius: 12px;} .button5 {border-radius: 50%;}不同边框颜色代码：
.button1 { background-color: white; color: black; border: 2px solid #4CAF50; /* Green */ } 2.专业按钮接下来的按钮涉及较多的CSS样式，本人将其上传到CSDN资源目录，下载地址：download.csdn/download/m0_67316550/86806975
2.1.三维效果按钮 <div> <button class="button button-3d button-box button-jumbo"><i></i></button> <a href="#" class="button button-3d button-primary button-rounded">点击</a> <a href="#" class="button button-3d button-action button-pill">点击</a> <button class="button button-3d button-action button-circle button-jumbo"><i></i></button> <a href="#" class="button button-3d button-caution"><i></i> 点击</a> <a href="#" class="button button-3d button-royal">点击</a> </div> 2.2.突起样式的按钮 <div> <a href="#" class="button button-raised button-primary button-pill">Click me</a> <button class="button button-raised button-action button-circle button-jumbo"><i></i></button> <a href="#" class="button button-raised button-caution"><i></i>Click me</a> <a href="#" class="button button-raised button-royal">Click me!</a> <a href="#" class="button button-raised button-pill button-inverse">Click me!</a> </div> 2.3.为按钮中的文字赋予扁平效果的阴影 <div> <button class="button button-primary button-box button-giant button-longshadow-right"> <i></i> </button> <button class="button button-caution button-box button-raised button-giant button-longshadow"> <i></i> </button> <button class="button button-action button-box button-giant button-longshadow-left"> <i></i> </button> <button class="button button-highlight button-box button-giant button-longshadow-right button-longshadow-expand"> <i></i> </button> <button class="button button-primary button-circle button-giant button-longshadow"> <i></i> </button></div> 2.4.按钮周围有一圈光晕效果 <div> <a href="#" class="button button-glow button-rounded button-raised button-primary">Go</a> <a href="#" class="button button-glow button-border button-rounded button-primary">Go</a> <button class="button button-glow button-circle button-action button-jumbo"><i></i></button> <a href="#" class="button button-glow button-rounded button-highlight">Go</a> <a href="#" class="button button-glow button-rounded button-caution">Go</a> <a href="#" class="button button-glow button-rounded button-royal">Go</a> </div> 2.4.矩形按钮 <div> <button class="button button-rounded"> 选择 <i></i> </button> <button class="button button-primary button-large"> <i></i> 选择 </button> <button class="button button-action"> 选择 <i></i> </button> <button class="button button-caution button-pill"> 选择 <i></i> </button> <a href="#" class="button button-inverse"> <i></i> 选择 <i></i> </a> </div> 2.5.一组相关的按钮被并排排列 <div> <div class="button-group"> <button type="button" class="button button-primary">Option 1</button> <button type="button" class="button button-primary">Option 2</button> <button type="button" class="button button-primary">Option 3</button> <a href="#" class="button button-primary"> Select Me <i class="fa fa-caret-down"></i></a> </div> <div class="button-group"> <button type="button" class="button button-pill button-action">Option 1</button> <button type="button" class="button button-pill button-action">Option 2</button> <button type="button" class="button button-pill button-action">Option 3</button> </div> <div class="button-group"> <button type="button" class="button button-royal button-rounded button-raised">Option 1</button> <button type="button" class="button button-royal button-rounded button-raised">Option 2</button> <button type="button" class="button button-royal button-rounded button-raised">Option 3</button> </div> </div> 2.6.堆叠按钮 <div> <a href="#" class="button button-block button-rounded button-large">Go</a> <a href="#" class="button button-block button-rounded button-primary button-large">Go</a> <a href="#" class="button button-block button-rounded button-action button-large">Go</a> <a href="#" class="button button-block button-rounded button-highlight button-large">Go</a> <a href="#" class="button button-block button-rounded button-caution button-large">Go</a> <a href="#" class="button button-block button-rounded button-royal button-large">Go</a> </div> 2.7.额外的环绕效果 <div> <span class="button-wrap"> <button class="button button-circle"> <i></i> </button> </span> <span class="button-wrap"> <button class="button button-circle button-raised button-primary"> <i></i> </button> </span> <span class="button-wrap"> <a href="#" class="button button-pill ">Go</a> </span> <span class="button-wrap"> <a href="#" class="button button-pill button-raised button-primary">Go</a> </span> </div> 2.8.表单按钮 <div> <input type="submit" value="Go" class="button button-pill button-primary"> <button class="button button-pill button-primary">Go</button> <input disabled="" type="submit" value="Go" class="button button-pill button-primary"> <button disabled="" class="button button-pill button-primary">Go</button> <button disabled="" class="button button-pill button-flat-primary">Go</button> <a href="#" class="button disabled button-pill button-primary ">Go</a> </div> 2.9.各种文字样式 <div> <a href="#" class="button button-uppercase button-primary">uppercase</a> <a href="#" class="button button-lowercase button-primary ">lowercase</a> <a href="#" class="button button-capitalize button-primary">capitalize</a> <a href="#" class="button button-small-caps button-primary">small caps</a> </div> 3.作者答疑如有疑问，请留言。
本文标签： js
版权声明：本文标题：JS 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686968878a123614.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论