卡卡網(wǎng)

本文給大家介紹一款按鈕的鼠標(biāo)懸停效果，是純CSS實(shí)現(xiàn)的，鼠標(biāo)移上按鈕后，按鈕背景顏色隨之變化。這個(gè)效果使用非常廣泛，非常多的網(wǎng)頁(yè)都用上了這個(gè)效果。

demodownload

HTML

HTML代碼里，第一個(gè)按鈕，button使用button的CSS屬性；第二個(gè)按鈕，button使用了兩個(gè)CSS屬性，button和-primary。

<div>
  <input class="input" type="text"/>
  <button class="button">Button</button>
  <button class="button -primary">Button</button>
</div>

CSS

.button {
  padding: 1rem 2rem;
  border-color: #171d27;
  background-color: #fff;
  background-image: radial-gradient(ellipse at bottom, #f6f6f8 50%, transparent 75%);
  background-position: center bottom;
  background-size: 0% 0%;
  background-repeat: no-repeat;
  font-weight: bold;
  transition: background-size 100ms 0ms ease;
  will-change: background-size, transform;
}
.button:hover {
  background-size: 200% 200%;
  transition: background-size 320ms 0ms ease;
}
.button:active {
  transform: translate3d(0, 0.25rem, 0) scale3d(96%, 96%, 1);
}
.button.-primary {
  background-color: #171d27;
  background-image: radial-gradient(ellipse at bottom, #43526f 50%, transparent 75%);
  color: #fff;
}

.button 設(shè)置按鈕的顏色等樣式屬性，.button:hover 和 .button:active 設(shè)置按鈕鼠標(biāo)懸停后的變化效果，.button.-primary 設(shè)置按鈕的樣式。

execcodegetcode

您可能對(duì)以下文章也感興趣

• 純CSS3：鼠標(biāo)移上去三角形(箭頭)旋轉(zhuǎn)【實(shí)例演示#源碼下載】
• CSS懸停效果按鈕一簡(jiǎn)單實(shí)例（鼠標(biāo)移到按鈕上變成其他顏色）
• 漂亮的css3圓形鼠標(biāo)懸停效果實(shí)例
• 使用css轉(zhuǎn)換和3d旋轉(zhuǎn)的圓形鼠標(biāo)懸停效果【2例】
• 很好看的css3動(dòng)畫按鈕鼠標(biāo)懸停效果【2個(gè)實(shí)例】
• 漂亮懸停效果的CSS3動(dòng)畫按鈕【5個(gè)實(shí)例代碼】
• span標(biāo)簽寫法問(wèn)題導(dǎo)致ie8 hover失效

標(biāo)簽: hover  鼠標(biāo)懸停效果  懸停效果