鼠標(biāo)懸停效果

.button {    background-color: #4CAF50; /* Green */    border: none;    color: white;    padding: 16px 32px;    text-align: center;    text-decoration: none;    display: inline-block;    font-size: 16px;    margin: 4px 2px;    -webkit-transition-duration: 0.4s; /* Safari */    transition-duration: 0.4s;    cursor: pointer;} .button1 {    background-color: white;     color: black;     border: 2px solid #4CAF50;} .button1:hover {    background-color: #4CAF50;    color: white;} .button2 {    background-color: white;     color: black;     border: 2px solid #008CBA;} .button2:hover {    background-color: #008CBA;    color: white;} <button class='button button1'>Green</button><button class='button button2'>Blue</button>

我們可以使用 :hover 選擇器來(lái)修改鼠標(biāo)懸停在按鈕上的樣式，使用 transition-duration 屬性可以設(shè)置 'hover' 效果的速度。

鼠標(biāo)懸浮帶陰影按鈕

.button {    background-color: #4CAF50;    border: none;    color: white;    padding: 15px 32px;    text-align: center;    text-decoration: none;    display: inline-block;    font-size: 16px;    margin: 4px 2px;    cursor: pointer;    -webkit-transition-duration: 0.4s; /* Safari */    transition-duration: 0.4s;}.button1:hover {    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}<button class='button button1'>鼠標(biāo)懸停后出現(xiàn)陰影</button>

添加陰影后，按鈕顯得更加立體。

鼠標(biāo)懸停后按鈕添加箭頭圖標(biāo)

.button { display: inline-block; border-radius: 4px; background-color: #f4511e; border: none; color: #FFFFFF; text-align: center; font-size: 28px; padding: 20px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px; vertical-align:middle;}.button span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s;}.button span:after { content: '?'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s;}.button:hover span { padding-right: 25px;}.button:hover span:after { opacity: 1; right: 0;}<button class='button'><span>Hover </span></button>

按鈕點(diǎn)擊的水波效果

.button {    position: relative;    background-color: #4CAF50;    border: none;    font-size: 28px;    color: #FFFFFF;    padding: 20px;    width: 200px;    text-align: center;    -webkit-transition-duration: 0.4s; /* Safari */    transition-duration: 0.4s;    text-decoration: none;    overflow: hidden;    cursor: pointer;}.button:after {    content: '';    background: #90EE90;    display: block;    position: absolute;    padding-top: 300%;    padding-left: 350%;    margin-left: -20px!important;    margin-top: -120%;    opacity: 0;    transition: all 0.8s}.button:active:after {    padding: 0;    margin: 0;    opacity: 1;    transition: 0s}<button class='button'>Click Me</button>

這個(gè)gif沒(méi)做好

按鈕點(diǎn)擊“往下壓”的效果

.button { display: inline-block; padding: 15px 25px; font-size: 24px; cursor: pointer; text-align: center; text-decoration: none; outline: none; color: #fff; background-color: #4CAF50; border: none; border-radius: 15px; box-shadow: 0 9px #999;}.button:hover {background-color: #3e8e41}.button:active { background-color: #3e8e41; box-shadow: 0 5px #666; transform: translateY(4px);}<button class='button'>Click Me</button>

歡迎大家多多關(guān)注～

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶(hù)發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

打開(kāi)APP，閱讀全文并永久保存查看更多類(lèi)似文章

css3制作大型導(dǎo)航 | 前端實(shí)例

CSS 八種讓人眼前一亮的 HOVER 效果

一篇文章帶你了解CSS3按鈕知識(shí)

FE(0x01)--前端嗎？我需要一個(gè)按鈕

CSS3過(guò)渡效果（css3 transition）

純html5+css3下拉導(dǎo)航菜單實(shí)現(xiàn)代碼

更多類(lèi)似文章 >>

免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

鼠標(biāo)懸停效果

鼠標(biāo)懸浮帶陰影按鈕

鼠標(biāo)懸停后按鈕添加箭頭圖標(biāo)

按鈕點(diǎn)擊的水波效果

按鈕點(diǎn)擊“往下壓”的效果