经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
「HTML+CSS」--自定义按钮样式【001】
来源：cnblogs　　作者：海轰Pro　　时间：2021/3/29 8:56:01　　对本文有异议

前言

Hello！小伙伴！
首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～
哈哈 自我介绍一下
昵称：海轰
标签：程序猿一只｜C++选手｜学生
简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～）
学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！
日常分享：微信公众号【海轰Pro】记录生活、学习点滴，分享一些源代码或者学习资料，欢迎关注～

效果展示

在这里插入图片描述

思路

上面效果可以概括为：

  • 鼠标未停留时：蓝色（渐变）背景，正中文字为白色，button四角做了圆角处理
  • 鼠标停留时：button背景变成白色，文字变为蓝色，同时右上方、左下角同时延伸两条互相垂直的线条

根据效果图可以得出实现的一些思路：

  • 背景、文字的颜色变化使用hover就可以实现
  • 右上角的两条线可以使用button的::before/::after伪类，结合transition，当鼠标停留时，实现两条线的延展
  • 中间的文字使用span标签，需要使用span标签的伪类
  • 左下角的两条线利用span的伪类::before/::after实现，原理类似右上角

Demo代码

HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <link rel="stylesheet" href="style.css">
  9.     <title>Document</title>
  10. </head>
  12. <body>
  13.     <button class="btn"><span>Haihong Pro</span></button>
  14. </body>
  16. </html>

CSS

  1. html,body{
  2.     margin: 0;
  3.     height: 100%;
  4. }
  5. body{
  6.     display: flex;
  7.     justify-content: center;
  8.     align-items: center;
  9. }
  10. .btn{
  11.    width: 390px;
  12.    height: 120px; 
  13.    color: #fff; 
  14.    background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
  15.    font-family: 'Lato', sans-serif;
  16.    font-weight: 500;
  17.    border-radius: 10px;
  18.    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
  19.    7px 7px 20px 0px rgba(0, 0, 0, .1),
  20.    4px 4px 5px 0px rgba(0, 0, 0, .1);
  21.    transition: all 0.3s ease;
  22.    cursor: pointer;
  23.    border: none;
  24.    position: relative;
  25.    line-height: 120px;
  26.    padding: 0;
  27. }
  28. .btn span{
  29.     position: relative;
  30.     display: block;
  31.     width: 100%;
  32.     height: 100%;
  33.     font-size: 48px;
  34. }
  35. .btn::before,.btn::after{
  36.     position:absolute;
  37.     content: '';
  38.     top: 0;
  39.     right: 0;
  40.     background: rgba(2, 126, 251, 1); 
  41.     transition: all 0.3s ease;
  42. }
  43. .btn::before{
  44.     width: 0;
  45.     height: 2px;
  46. }
  47. .btn::after{
  48.     height: 0;
  49.     width: 2px;
  50. }
  51. .btn span::before,
  52. .btn span::after{
  53.     position:absolute;
  54.     content: '';
  55.     bottom: 0;
  56.     left: 0;
  57.     background: rgba(2, 126, 251, 1);
  58.     transition: all 0.3s ease;
  59. }
  60. .btn span::before{
  61.     width: 0;
  62.     height: 2px;
  63. }
  64. .btn span::after{
  65.     height: 0;
  66.     width: 2px;
  67. }
  69. .btn:hover{
  70.     background: transparent;
  71.     color: rgba(2, 126, 251, 1);
  72. }
  74. .btn:hover::before{
  75.     width: 100%;
  76. }
  77. .btn:hover::after{
  78.     height: 100%;
  79. }
  80. .btn span:hover::before{
  81.     width: 100%;
  82. }
  83. .btn span:hover::after{
  84.     height: 100%;
  85. }

疑点详解

怎么实现两条线的延展的呢？

首先，使用::before和::after伪类，在button的前后添加两个伪元素
一个width=0，height=2px；另一个height=0，width=2px
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
这里便于理解和观察，我们将这两个元素显示出来

修改css代码：将before改为红色，便于观察，同时width、height都改为20px

  1. .btn::before,.btn::after{
  2.     position:absolute;
  3.     content: '';
  4.     top: 0;
  5.     right: 0;
  6.     background: red; 
  7.     transition: all 0.3s ease;
  8. }
  9. .btn::before{
  10.     width: 20px;
  11.     height: 20px;
  12. }

现在就可以观察到before的具体位置了
在这里插入图片描述
在这里插入图片描述
利用CSS 中的 transition 属性，在鼠标停留（hover）在其上时，将其宽度修改为100%，
就可以实现延展效果了

  1. // 鼠标停留在上方时，宽度变成100%
  2. .btn:hover::before{
  3.     width: 100%;
  4. }

在这里插入图片描述
不了解css transition的小伙伴可以查看：

transition简介：https://www.w3school.com.cn/cssref/pr_transition.asp

一个before实现宽度的延伸，另一个after就实现高度的延伸，所以一个元素的两个伪元素就可以实现两条线的延展效果

同样，左下角的延展就是利用span的::before和::after伪元素了

踩坑

1.父元素button没有设置padding=0，会出现四条线没有完美闭合的情况
在这里插入图片描述
2. button元素中应该设置position: relative，如果没有会出现：
在这里插入图片描述
原因：因为button的before和after伪元素中的 position:absolute; 所以必须设置button position: relative，

position中absolute是指：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

如果不声明button的position为relative，那么此时button::before/after就会认为它的父元素是浏览器，那么绝对定位也就是根据浏览器而定了。

注释版代码

  1. html,body{
  2.     margin: 0;
  3.     height: 100%;
  4. }
  5. body{
  6.     /* 元素居于正中 */
  7.     display: flex;
  8.     justify-content: center;
  9.     align-items: center;
  10. }
  11. .btn{
  12.    width: 390px;
  13.    height: 120px; 
  14.    /* 文字颜色为白色 */
  15.    color: #fff; 
  16.    /* button背景色为渐变蓝色 */
  17.    background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
  18.    /* 字体设置 */
  19.    font-family: 'Lato', sans-serif;
  20.    font-weight: 500;
  21.    /* 圆角处理 */
  22.    border-radius: 10px;
  23.    /* button阴影设置 */
  24.    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
  25.    7px 7px 20px 0px rgba(0, 0, 0, .1),
  26.    4px 4px 5px 0px rgba(0, 0, 0, .1);
  27.    /* 设置过渡属性  所以元素过渡 持续时间：0.3s 速度曲线类型：ease*/
  28.    transition: all 0.3s ease;
  29.    /* 鼠标停留时，变为小手 */
  30.    cursor: pointer;
  31.    border: none;
  32.    position: relative;
  33.    /* 行高  */
  34.    line-height: 120px;
  35.    padding: 0;
  36. }
  37. .btn span{
  38.     /* 相对定位 */
  39.     position: relative;
  40.     /* 块级元素 */
  41.     display: block;
  42.     width: 100%;
  43.     height: 100%;
  44.     font-size: 48px;
  45. }
  46. .btn::before,.btn::after{
  47.     /* 绝对定位 */
  48.     position:absolute;
  49.     /* content必须有 不然不显示 */
  50.     content: '';
  51.     /* 定位右上角 */
  52.     top: 0;
  53.     right: 0;
  54.     /* 背景色：蓝色 */
  55.     background: rgba(2, 126, 251, 1); 
  56.     transition: all 0.3s ease;
  57. }
  58. .btn::before{
  59.     /* 初始化 */
  60.     width: 0;
  61.     height: 2px;
  62. }
  63. .btn::after{
  64.     height: 0;
  65.     width: 2px;
  66. }
  67. .btn span::before,
  68. .btn span::after{
  69.     /* 绝对定位 */
  70.     position:absolute;
  71.     content: '';
  72.     /* 定位左下角 */
  73.     bottom: 0;
  74.     left: 0;
  75.     background: rgba(2, 126, 251, 1);
  76.     transition: all 0.3s ease;
  77. }
  78. .btn span::before{
  79.     width: 0;
  80.     height: 2px;
  81. }
  82. .btn span::after{
  83.     height: 0;
  84.     width: 2px;
  85. }
  87. .btn:hover{
  88.     /* 背景透明 */
  89.     background: transparent;
  90.     /* 字体色变为：蓝色 */
  91.     color: rgba(2, 126, 251, 1);
  92. }
  94. .btn:hover::before{
  95.     /* 宽度过渡为100% */
  96.     width: 100%;
  97. }
  98. .btn:hover::after{
  99.     /* 高度过渡为100% */
  100.     height: 100%;
  101. }
  102. .btn span:hover::before{
  103.     width: 100%;
  104. }
  105. .btn span:hover::after{
  106.     height: 100%;
  107. }

结语

学习来源：

https://codepen.io/yuhomyan/pen/OJMejWJ

css只会一点点，学习之余从喜欢看一些大神级别的css效果展示，根据源码一点一点学习知识点，文中有不对的地方，欢迎指出～

在这里插入图片描述

原文链接：http://www.cnblogs.com/haihongpro/p/14588474.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号