我需要知道如何創建一個按鈕，該按鈕在開始時具有紅色，但是當滑鼠移到它時，它會變為橙色。
我需要為我的網站創建這樣的按鈕。
uj5u.com熱心網友回復：
您應該研究 CSS 偽類和轉換。
：徘徊
:hover CSS 偽類在用戶使用指標設備與元素互動時匹配，但不一定激活它。它通常在用戶使用游標（滑鼠指標）懸停在元素上時觸發。
過渡
transition CSS 屬性是transition-property、transition-duration、transition-timing-function 和transition-delay 的簡寫屬性。
button {
background: red;
transition: background 300ms ease-in-out;
}
button:hover {
background: orange;
}<button>Simple</button> uj5u.com熱心網友回復：
button {
background-color: red;
}
button:hover {
background-color: orange;
}
button#b:hover {
transition: 1s;
}Immediate change
<button>Hello World</button>
<br><br>
Change with transition
<button id="b">Hello World</button>uj5u.com熱心網友回復：
我從https://remixicon.com/復制了心形圖示
.heart-btn{
display: flex;
align-items: center;
color: red;
cursor: pointer;
border-radius: 50px;
padding: 0 10px;
}
.heart-btn:hover{
color: orange;
}
.label{
margin-left: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button color</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" style="display: none;">
<symbol id="my-icon" viewBox="0 0 24 24">
<path fill="none" d="M0 0H24V24H0z"/>
<path fill="currentColor" d="M12.001 4.529c2.349-2.109 5.979-2.039 8.242.228 2.262 2.268 2.34 5.88.236 8.236l-8.48 8.492-8.478-8.492c-2.104-2.356-2.025-5.974.236-8.236 2.265-2.264 5.888-2.34 8.244-.228z"/>
</symbol>
</svg>
<button class="heart-btn">
<svg width="24px" height="24px">
<use xlink:href="#my-icon"></use>
</svg>
<div class="label">Love it</div>
</button>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/526143.html
標籤：htmlcss
上一篇：如何將我的搜索框放在右上角？