css3按鈕點(diǎn)擊效果如何實(shí)現(xiàn)

小樊
81
2024-10-23 09:57:15

在CSS3中，可以使用偽類:active來(lái)實(shí)現(xiàn)按鈕點(diǎn)擊效果。以下是一個(gè)簡(jiǎn)單的示例：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 Button Click Effect</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button class="btn">Click me</button>
</body>
</html>

CSS (styles.css):

.btn {
  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;
  transition-duration: 0.4s;
}

.btn:active {
  background-color: #45a049;
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)名為.btn的按鈕。當(dāng)用戶點(diǎn)擊按鈕時(shí)，:active偽類會(huì)使按鈕的背景顏色從#4CAF50變?yōu)?code>#45a049，從而產(chǎn)生點(diǎn)擊效果。transition-duration屬性用于設(shè)置顏色變化的持續(xù)時(shí)間。

0 踩