CSS3是一個非常強大的前端技術,它使得我們可以創建各種令人印象深刻的按鈕特效。今天,我們將進一步探討一些關于更多按鈕特效的CSS3技術。
// 1. 懸停動畫按鈕 button{ background-color: #3f3d56; color: #fff; border: none; padding: 10px 25px; font-size: 18px; transition: all .3s ease; } button:hover{ background-color: #ff1744; color: #fff; transform: translateY(-5px); } // 2. 立體按鈕 button{ background-color: #3f3d56; color: #fff; border: none; padding: 10px 25px; font-size: 18px; transition: all .3s ease; position: relative; } button:after{ content: ''; position: absolute; top: 10px; left: 5px; width: 50%; height: 80%; background-color: #9b9b9b; transform: skewX(-20deg); z-index: -1; transition: all .3s ease-in-out; } button:hover{ color: #3f3d56; } button:hover:after{ width: 100%; } // 3. 邊框變化按鈕 button{ background-color: #3f3d56; color: #fff; border: none; padding: 10px 25px; font-size: 18px; transition: all .3s ease; } button:hover{ border: 2px solid #ff1744; background-color: transparent; color: #fff; } // 4. 大小變化按鈕 button{ background-color: #3f3d56; color: #fff; border: none; padding: 10px 25px; font-size: 18px; transition: all .3s ease; } button:hover{ transform: scale(1.1); } // 5. 連接線按鈕 button{ background-color: #3f3d56; color: #fff; border: none; padding: 10px 25px; font-size: 18px; transition: all .3s ease; position: relative; } button:before{ content: ''; position: absolute; top: 50%; left: 0; width: 0; height: 1px; background-color: #fff; transition: all .3s ease; } button:hover{ color: #3f3d56; } button:hover:before{ width: 100%; }
以上是我們在更多按鈕特效CSS3技術方面的一些探討。我們可以使用這些技術來創建出各種漂亮而有趣的按鈕特效。
上一篇更改css文件后強制刷新
下一篇更改css復選框