大家好,今天是 CSS技巧專欄:一日一例 第三篇《純CSS實現兩款流光溢彩的酷炫按鈕特效》
先看圖:
特此說明:
本專題專注于講解如何使用CSS制作按鈕特效。前置的準備工作和按鈕的基本樣式,都在本專欄第一篇文章中又詳細說明。自本專欄第四篇文章起,本專欄都將直接跳過前面的內容,不再重復復制,需要了解按鈕基礎樣式的同學,請移步:《CSS技巧 - 一日一例 (1):會討好的熱情按鈕》。
第一步:基本頁面布局
<div class="container"><button class="base">流光溢彩</button><button class="base">邊框流光溢彩</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 class="container"><button class="base btn-primary">流光溢彩</button><button class="base 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 class="container"><button class="base button-primary" >流光溢彩</button><button class="base 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實現炫酷多彩按鈕特效