>> 欢迎您 客人: 登录 | 注册 | 在线 | 搜索 | 风格 | 帮助 | 统计 | 文章 返回首页
>>分享Web前端开发技术，并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
Java技术网站 → 『 Java开发技术 』 → 『 Web前端开发技术专题 』 → CSS 按钮
发表一个新主题 开启一个新投票 回复文章 您是本文章第 26209 个阅读者 刷新本主题
 * 贴子主题:  CSS 按钮 回复文章 点赞(0)  收藏  
作者:sunshine    发表时间：2019-08-15 13:58:46     消息  查看  搜索  好友  邮件  复制  引用
.w3-ripple{

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;

}

.w3-btn {

    position: relative;

}

.w3-btn, .w3-btn:link, .w3-btn:visited {

    color: #FFFFFF;

    background-color: #73AD21;

    background-color: #4CAF50;

    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

.btn {

background-color: #4CAF50;

border: none;

color: #FFFFFF;

padding: 15px 32px;

text-align: center;

-webkit-transition-duration: 0.4s; /* Safari */

transition-duration: 0.4s;

margin: 16px 0 !important;

text-decoration: none;

font-size:16px;

}

        .btn1 {background-color: #4CAF50;} /* Green */

.btn2 {background-color: #008CBA;} /* Blue */

.btn3 {background-color: #f44336;} /* Red */

.btn4 {background-color: #e7e7e7;color:black;} /* Grey */

.btn5 {background-color: #555555;} /* Orange */

        .btn1:hover {background-color: #4CAF50;}

.btn2:hover {background-color: #008CBA;}

.btn3:hover {background-color: #f44336;}

.btn4:hover {background-color: #e7e7e7;color:black;}

.btn5:hover {background-color: #555555;}

        .font1 {font-size:10px;}

.font2 {font-size:12px;}

.font3 {font-size:16px;}

.font4 {font-size:20px;}

.font5 {font-size:24px;}

.round1 {border-radius:2px}

.round2 {border-radius:4px}

.round3 {border-radius:8px}

.round4 {border-radius:12px}

.round5 {border-radius:50%}

.width1 {width: 250px}

.width2 {width: 50%}

.width3 {width: 100%}

        .border1 {border-radius:3px;background-color:white;color:black;border:2px solid #4CAF50;}

.border2 {border-radius:3px;background-color:white;color:black;border:2px solid #008CBA;}

.border3 {border-radius:3px;background-color:white;color:black;border:2px solid #f44336;}

.border4 {border-radius:3px;background-color:white;color:black;border:2px solid #e7e7e7;}

.border5 {border-radius:3px;background-color:white;color:black;border:2px solid #555555;}

        .border11:hover {background-color:#4CAF50;color:white;}

.border22:hover {background-color:#008CBA;color:white;}

.border33:hover {background-color:#f44336;color:white;}

.border44:hover {background-color:#e7e7e7;}

.border55:hover {background-color:#555555;color:white;}

        .border111{border-radius:3px;background-color:#4CAF50;color:white;}

.border222{border-radius:3px;background-color:#008CBA;color:white;}

.border333 {border-radius:3px;background-color:#f44336;color:white;}

.border444 {border-radius:3px;background-color:#e7e7e7;}

.border555 {border-radius:3px;background-color:#555555;color:white;}

        .border111:hover {background-color:white;color:black;border:2px solid #4CAF50;}

.border222:hover {background-color:white;color:black;border:2px solid #008CBA;}

.border333:hover {background-color:white;color:black;border:2px solid #f44336;}

.border444:hover {background-color:white;color:black;border:2px solid #e7e7e7;}

.border555:hover {background-color:white;color:black;border:2px solid #555555;}

                .shadow1{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important}

.shadow2:hover{box-shadow:0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19) !important}

        .disabled{cursor: not-allowed;opacity: 0.6;}

        .button {

  display: inline-block;

  border-radius: 4px;

  background-color: #f4511e;

  border: none;

  color: #FFFFFF;

  text-align: center;

  font-size: 28px;

  padding: 20px;

  width: 180px;

  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;

}

.pressed {

  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;

}

        .pressed:hover {background-color: #3e8e41}

.w3-ripple:after {

    content: "";

    background: #90EE90;

    display: block;

    position: absolute;

    padding-top: 300%;

    padding-left: 350%;

    margin-left: -20px!important;

    margin-top: -120%;

    opacity: 0;

    transition: all 0.8s

}

.w3-ripple:active:after {

    padding: 0;

    margin: 0;

    opacity: 1;

    transition: 0s

}

.pressed:active {

  background-color: #3e8e41;

  box-shadow: 0 5px #666;

  transform: translateY(4px);

}

        .float {

    margin: 0 !important;

float: left;

    transition: none;

}

        .float:hover {

    background-color: #3e8e41;

}

CSS 按钮

     本文我们为大家介绍使用 CSS 来制作按钮。            

基本按钮样式

     <button style="margin-right:25px;">默认按钮</button> <button class="btn">CSS 按钮</button>                    

CSS 范例

     .button {
     background-color:  #4CAF50;  /* Green */
     border:  none;
    
    color:  white;
     padding:  15px 32px;
     text-align:  center;
    
    text-decoration:  none;
     display:  inline-block;
     font-size:  16px;
}

按钮颜色

<button type="button" class="btn btn1">Green</button>

<button type="button" class="btn btn2">Blue</button>

<button type="button" class="btn btn3">Red</button>

<button type="button" class="btn btn4">Gray</button>

<button type="button" class="btn btn5">Black</button>

     我们可以使用  background-color 属性来设置按钮颜色:                    

CSS 范例

.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 */

按钮大小

<button type="button" class="btn btn1 font1">10px</button>

<button type="button" class="btn btn2 font2">12px</button>

<button type="button" class="btn btn3 font3">16px</button>

<button type="button" class="btn btn4 font4">20px</button>

<button type="button" class="btn btn5 font5">24px</button>

        我们可以使用  font-size 属性来设置按钮大小:            

CSS 范例

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

圆角按钮

<button type="button" class="btn btn1 round1">2px</button>

<button type="button" class="btn btn2 round2">4px</button>

<button type="button" class="btn btn3 round3">8px</button>

<button type="button" class="btn btn4 round4">12px</button>

<button type="button" class="btn btn5 round5">50%</button>

     我们可以使用  border-radius 属性来设置圆角按钮:            

CSS 范例

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

按钮边框颜色

<button type="button" class="btn border1">绿</button>

<button type="button" class="btn border2">蓝</button>

<button type="button" class="btn border3">红</button>

<button type="button" class="btn border4">灰</button>

<button type="button" class="btn border5">黑</button>

      我们可以使用  border 属性设置按钮边框颜色:            

CSS 范例

.button1 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
}
...

鼠标悬停按钮

<button type="button" class="btn border1 border111">绿</button>

<button type="button" class="btn border2 border222">蓝</button>

<button type="button" class="btn border3 border333">红</button>

<button type="button" class="btn border4 border444">灰</button>

<button type="button" class="btn border5 border555">黑</button>

<button type="button" class="btn border1 border11">绿</button>

<button type="button" class="btn border2 border22">蓝</button>

<button type="button" class="btn border3 border33">红</button>

<button type="button" class="btn border4 border44">灰</button>

<button type="button" class="btn border5 border55">黑</button>

        我们可以使用  :hover 选择器来修改鼠标悬停在按钮上的样式。

         提示: 我们可以使用  transition-duration 属性来设置 "hover" 效果的速度:            

CSS 范例

.button {
    -webkit-transition-duration: 0.4s; /* Safari */
    
     transition-duration: 0.4s;
}

.button:hover {
    
    background-color: #4CAF50; /* Green */
    color: white;
}
...

按钮阴影

<button type="button" class="btn shadow1">阴影按钮</button>

<button type="button" class="btn shadow2">鼠标悬停后显示阴影</button>

     我们可以使用  box-shadow 属性来为按钮添加阴影:            

CSS 范例

.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);
}

禁用按钮

<button type="button" class="btn">正常按钮</button>

<button type="button" class="btn disabled">禁用按钮</button>

     我们可以使用  opacity 属性为按钮添加透明度 (看起来类似"disabled" 属性效果)。

         提示: 我们可以添加  cursor 属性并设置为

"not-allowed" 来设置一个禁用的图片:            

CSS 范例

.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

按钮宽度

<button type="button" class="btn btn1 width1">250px</button>

<button type="button" class="btn btn2 width2">50%</button>

<button type="button" class="btn btn3 width3">100%</button>

     默认情况下，按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。 我们可以使用  width 属性来设置按钮的宽度:

     提示: 如果要设置固定宽度可以使用像素 (px) 为单位，如果要设置响应式的按钮可以设置为百分比。            

CSS 范例

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}

按钮组

<button type="button" class="btn btn1 float">Button</button>

<button type="button" class="btn btn1 float">Button</button>

<button type="button" class="btn btn1 float">Button</button>

<button type="button" class="btn btn1 float">Button</button>

     移除外边距并添加  float:left 来设置按钮组:            

CSS 范例

.button {
    float: left;
}                                

带边框按钮组

<button type="button" class="btn btn1 float" style="border:1px solid green">Button</button>

<button type="button" class="btn btn1 float" style="border:1px solid green">Button</button>

<button type="button" class="btn btn1 float" style="border:1px solid green">Button</button>

<button type="button" class="btn btn1 float" style="border:1px solid green">Button</button>

        我们可以使用  border 属性来设置带边框的按钮组:            

CSS 范例

.button {
    float: left;
    border: 1px solid green
}

按钮动画

CSS 范例

     鼠标移动到按钮上后添加箭头标记:

     <button class="button" style="vertical-align:middle"> Hover </button>                        

CSS 范例

     点击时添加 "波纹" 效果:

     <button class="w3-btn w3-ripple" style="margin:5px;width:180px;padding:20px;font-size:28px;">
     Click </button>                        

CSS 范例

     点击时添加 "压下" 效果:

    <button class="pressed" style="margin:5px;width:180px;padding:20px;font-size:28px;">
     Click </button>


程序猿的技术大观园：www.javathinker.net



[这个贴子最后由 flybird 在 2020-02-21 09:39:29 重新编辑]
Java精品书籍推荐
Java最新视频教程推荐
  Java面向对象编程-->继承
  JavaWeb开发-->JSP技术详解（Ⅱ）
  JSP与Hibernate开发-->映射一对多关联关系
  Java网络编程-->客户端协议处理框架
  精通Spring-->创建综合购物网站应用
  Vue3开发-->Vue CLI脚手架工具
本站其他相关文章
  JS 闭包的 9 大经典使用场景
  不可错过的几种JS优化技巧
  qs.parse()、qs.stringify()、JSON.stringify() 用法及区别
  Vue3.0里为什么要用 Proxy API 替代 defineProperty API ？ ...
  介绍axios的基本使用(vue中使用axios)
  Vue+Vant中van-list请求数据(数据请求调用公用方法)
  vue 项目导出word格式文件
  Vue开发常用的框架及案例
  HTML DOM Image图片对象
  CSS3 多列布局
  CSS3 2D 转换
  JavaScript Array（数组）对象
  JavaScript 的字符串以及处理方法
  Android 广播接收器(Broadcast Receivers)
  一文读懂前端技术演进：盘点Web前端20年的技术变迁史
  更多...
 IPIP: 已设置保密
楼主      
共1页 2条记录 当前第1页
发表一个新主题 开启一个新投票 回复文章

中文版权所有： JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶，分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权，请与本站管理员联系。