经验首页 前端设计 程序设计 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">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <link rel="stylesheet" href="style.css">
  8. <title>Document</title>
  9. </head>
  10. <body>
  11. <button class="btn"><span>Haihong Pro</span></button>
  12. </body>
  13. </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. }
  68. .btn:hover{
  69. background: transparent;
  70. color: rgba(2, 126, 251, 1);
  71. }
  72. .btn:hover::before{
  73. width: 100%;
  74. }
  75. .btn:hover::after{
  76. height: 100%;
  77. }
  78. .btn span:hover::before{
  79. width: 100%;
  80. }
  81. .btn span:hover::after{
  82. height: 100%;
  83. }

疑点详解

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

首先,使用::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. }
  86. .btn:hover{
  87. /* 背景透明 */
  88. background: transparent;
  89. /* 字体色变为:蓝色 */
  90. color: rgba(2, 126, 251, 1);
  91. }
  92. .btn:hover::before{
  93. /* 宽度过渡为100% */
  94. width: 100%;
  95. }
  96. .btn:hover::after{
  97. /* 高度过渡为100% */
  98. height: 100%;
  99. }
  100. .btn span:hover::before{
  101. width: 100%;
  102. }
  103. .btn span:hover::after{
  104. height: 100%;
  105. }

结语

学习来源:

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

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

在这里插入图片描述

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

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

本站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号