当前位置:   article > 正文

css分享 | 常用按钮效果记录(关注追加)_css按钮点击效果

css按钮点击效果

今日分享几个css样式,在日常业务中,我们会追求更友好的交互体验,所以记录一些业务中常用的按钮样式,下次遇到可以拿来即用。

目录

1.按钮水波纹点击效果

2.流光波光闪烁效果

3.按钮点击立体效果

4.按钮悬停出现箭头效果


1.按钮水波纹点击效果

水波纹点击效果如下图:

html代码:

<div class="my-button canClick" >我是按钮</div>

 css样式:

  1. .my-button{
  2. cursor: pointer;
  3. position: relative;
  4. width: 200px;
  5. height: 40px;
  6. line-height: 40px;
  7. background: #ddd;
  8. border-radius: 80px;
  9. font-family: PingFang-SC-Heavy;
  10. font-weight: 500;
  11. color: #FFFFFF;
  12. letter-spacing: 0;
  13. text-align: center;
  14. font-size: 20px;
  15. overflow: hidden;
  16. }
  17. .my-button.canClick{
  18. background: #1676FF;
  19. }
  20. .my-button::after {
  21. content: "";
  22. background: #f1f1f1;
  23. display: block;
  24. position: absolute;
  25. left: 50%;
  26. top: 50%;
  27. transform: translate(-50%, -50%);
  28. width:1000px;
  29. height:1000px;
  30. border-radius: 100%;
  31. opacity: 0;
  32. transition: all 0.8s
  33. }
  34. .my-button.canClick:active:after {
  35. width:50px;
  36. height:50px;
  37. opacity: 0.6;
  38. transition: 0s
  39. }

2.流光波光闪烁效果

按钮效果如下图:

 html代码:

  1. <!-- 带流光高亮 -->
  2. <div class="btn2">我是btn2</div>

css样式:

  1. .btn2 {
  2. width: 200px;
  3. height: 40px;
  4. line-height: 40px;
  5. border-radius: 80px;
  6. overflow: hidden;
  7. position: relative;
  8. display: flex;
  9. align-items: center;
  10. justify-content: center;
  11. cursor: pointer;
  12. background: #1676FF;
  13. font-size: 20px;
  14. color: #fff;
  15. opacity: 1;
  16. }
  17. .btn2:hover{
  18. opacity: 0.6;
  19. }
  20. .btn2::before {
  21. content: "";
  22. display: block;
  23. width: 25px;
  24. height: 50px;
  25. background: rgba(255, 255, 255, 0.3);
  26. transform: skewX(-25deg);
  27. position: absolute;
  28. left: -35px;
  29. animation: liuguang infinite 1s ease-in;
  30. }
  31. @keyframes liuguang {
  32. 50% {
  33. left: -45px;
  34. }
  35. 100% {
  36. left: 210px;
  37. }
  38. }

3.按钮点击立体效果

按钮效果如下图:

 html代码:

  1. <!-- 立体按钮点击按下 -->
  2. <div class="btn3">我是btn3</div>

css代码:

  1. .btn3 {
  2. cursor: pointer;
  3. width: 200px;
  4. height: 40px;
  5. line-height: 40px;
  6. background: #ddd;
  7. border-radius: 80px;
  8. font-family: PingFang-SC-Heavy;
  9. font-weight: 500;
  10. color: #FFFFFF;
  11. letter-spacing: 0;
  12. text-align: center;
  13. font-size: 20px;
  14. overflow: hidden;
  15. background: rgba(71, 156, 235, 0.7);
  16. box-shadow: 0 9px #999;
  17. user-select: none;
  18. }
  19. .btn3:hover {
  20. background: #1676FF;
  21. }
  22. .btn3:active {
  23. background-color: #1676FF;
  24. box-shadow: 0 5px #666;
  25. transform: translateY(4px);
  26. }

4.按钮悬停出现箭头效果

按钮效果如图:

 

html代码:

  1. <!-- 悬停出现箭头 -->
  2. <div class="btn4"><span>我是btn4</span></div>

css代码:

  1. .btn4 {
  2. display: inline-block;
  3. border-radius: 20px;
  4. background-color: #1676FF;
  5. border: none;
  6. color: #ffff;
  7. text-align: center;
  8. font-size: 20px;
  9. width: 200px;
  10. height: 40px;
  11. line-height: 40px;
  12. transition: all 0.5s;
  13. cursor: pointer;
  14. vertical-align: middle;
  15. }
  16. .btn4 span {
  17. cursor: pointer;
  18. display: inline-block;
  19. position: relative;
  20. transition: 0.5s;
  21. }
  22. .btn4 span::after {
  23. content: ">>";
  24. position: absolute;
  25. opacity: 0;
  26. top: 0;
  27. right: -20px;
  28. transition: 0.5s;
  29. }
  30. .btn4:hover span {
  31. padding-right: 30px;
  32. }
  33. .btn4:hover span::after {
  34. opacity: 1;
  35. right: 0;
  36. }

 以上就是我常用按钮效果记录,关注这篇,后面会继续追加……

以上,就是今天的学习,关注我,我们一起进步!

欢迎点赞、评论,谢谢!~

本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号