鼠標(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 選擇器來修改鼠標(biāo)懸停在按鈕上的樣式，使用 transition-duration 屬性可以設(shè)置 'hover' 效果的速度。 鼠標(biāo)懸浮帶陰影按鈕添加陰影后，按鈕顯得更加立體。 鼠標(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)擊的水波效果這個gif沒做好 按鈕點(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)注～ |
|
|
