纯css-炫酷的按钮

纯css-炫酷的按钮_第1张图片

今天我分享一个我捣鼓的按钮

1.首先我们先在html 啪啪一顿敲 弄出个基本的按钮(相信对于大家来说应该没有难度)

纯css-炫酷的按钮_第2张图片

 2.我们观察一下动图,发现我做的这个按钮 是有一个会动的边框的

所以我们需要给按钮添加一个before的伪元素,根据子绝父相的原则,给父元素按钮添加相对定位,给伪元素before添加绝对定位,并设置一个红色的背景(这个红色后面可以更换)

并且我们需要将before的z-index调成-1(z-index:-1;),按钮的z-index调成1(z-index:1;),确保before这个伪元素不会盖住我们的文字

纯css-炫酷的按钮_第3张图片

 3.将before这个伪元素 定位到按钮的右下部分,

纯css-炫酷的按钮_第4张图片

4.然后设置一个旋转的css函数,并且before这个伪元素调用这个旋转函数(效果如gif图)

纯css-炫酷的按钮_第5张图片

 5.然后我们再添加一个after的伪元素,这个伪元素略小于按钮,并且设置绝对定位

纯css-炫酷的按钮_第6张图片

6.再通过定位调整位置,居中压住before的中间

 纯css-炫酷的按钮_第7张图片

 7. 然后我们调整after的颜色和层次(z-index:-1;),

纯css-炫酷的按钮_第8张图片

8.然后我们在给按钮添加一个  overflow: hidden; 的属性,就得到了下面这个样子

纯css-炫酷的按钮_第9张图片

 9.最后 我们对before 进行微调  适当增加before的宽高 和改变before的颜色,就得到了最终的效果

 纯css-炫酷的按钮_第10张图片

 感谢大家的支持!!!以下是本按钮的代码 希望可以给大家更多的灵感!




    
    
    
    彩色旋转边框
    


    
登录

#【博学谷学习记录】超强总结,用心分享#

 

你可能感兴趣的:(【博学谷学习记录】超强总结,用心分享,html,前端,css,css3,学习)