专门做外贸网站有哪些,网站后台组成,西宁做手机网站的公司,外贸建站cms大家好#xff0c;今天是 CSS技巧专栏#xff1a;一日一例 第三篇《纯CSS实现两款流光溢彩的酷炫按钮特效》
先看图#xff1a; 特此说明#xff1a;
本专题专注于讲解如何使用CSS制作按钮特效。前置的准备工作和按钮的基本样式#xff0c;都在本专栏第一篇文章中又详细…大家好今天是 CSS技巧专栏一日一例 第三篇《纯CSS实现两款流光溢彩的酷炫按钮特效》
先看图 特此说明
本专题专注于讲解如何使用CSS制作按钮特效。前置的准备工作和按钮的基本样式都在本专栏第一篇文章中又详细说明。自本专栏第四篇文章起本专栏都将直接跳过前面的内容不再重复复制需要了解按钮基础样式的同学请移步《CSS技巧 - 一日一例 1会讨好的热情按钮》。
第一步基本页面布局
div classcontainerbutton classbase流光溢彩/buttonbutton classbase边框流光溢彩/button
/div
第二步按钮基本样式 第三步按钮渐变色的填充 和 动画
给按钮写渐变色填充写下按钮需要的样式
.button-primary {position: relative;border: transparent;outline: transparent;color: #fff;background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000,#fb0094);background-size: 500%;animation: animate 20s linear infinite;
}keyframes animate {0% {background-position: 0 0;}50% {background-position: 300% 0;}100% {background-position: 0 0;}
}
然后我们别忘了把这个类加到html代码中哦
div classcontainerbutton classbase btn-primary流光溢彩/buttonbutton classbase btn-primary边框流光溢彩/button
/div
在浏览器预览按钮效果 第四步给按钮文字增加阴影
text-shadow: -1px -1px 0px rgba(0,0,0,0.3),1px 1px 0px rgba(255,255,255,0.3);
本例在文本上做了两个阴影
阴影1在x轴和Y轴各向前1像素偏移向上向左模糊为0颜色为黑色透明度30%阴影2在x轴和Y轴各向后1像素偏移向下向右模糊为0颜色为白色透明度30%
通过这两个文字阴影给按钮上的文字增加了一个向下凹陷的效果。如图 第五步给按钮增加彩色的光
经过上一篇的案例CSS技巧专栏一日一例 3.纯CSS实现炫酷多彩按钮特效 我们已经知道只要给彩色渐变增加blur滤镜我们就可以得到一个扩散的模糊的炫彩的光。按照昨天的思路我们就可以实现炫光效果
.button-primary:before, .button-primary:after {content: ;position: absolute; border-radius: 2rem; top: -2px;left: -2px;background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000,#fb0094);background-size: 500%;width: calc(100% 4px);height: calc(100% 4px);z-index: -1;animation: animate 20s linear infinite;}
.button-primary:after {filter: blur(20px);
}
到这里按钮其实已经很炫了 对了还要给右边的按钮增加一个黑色蒙版。
.btn_mask{top:-1px;left: -1px;background: var(--main-bg-color);transition: all .5s;
}
div classcontainerbutton classbase button-primary 流光溢彩/buttonbutton classbase button-primary btn_mask 边框流光溢彩/button
/div 第六步添加鼠标响应动画
相对前一篇的按钮这一篇我们的按钮交互也没有难度接下来我们给两个按钮分别增加一些交互。
.btn_mask:hover{background: rgba(17, 17, 17, 0.5);transition: all .5s;
}
接下来还是留个小作业
我对上述代码做了小小的修改实现的按钮如图 感兴趣的同学可以自己动手复原一下
好啦今天的教程《纯CSS实现炫酷多彩按钮》到这里就结束了希望对可爱漂亮又富有爱心的你有所帮助嘿嘿别忘了给我点赞关注评论哦我在下面等你。。咳咳。。。下面评论区等你
本专栏其他文章
CSS技巧 - 一日一例 1会讨好的热情按钮
CSS技巧专栏一日一例 2.纯CSS实现 多彩边框按钮特效
CSS技巧专栏一日一例 3.纯CSS实现炫酷多彩按钮特效
