單純用 CSS 做出 hover 效果

Posted on Edited on In

要如何「單純用 CSS 做出 hover 效果」呢？

按鈕加上 hover 樣式

「加入購物車按鈕」要增加 hover 樣式，以提升使用體驗。（左：hover 效果）

單純用 css 就可以做出來了

html:

1
2
3
<a href="#" class="add_cart">
                        <p><i class="fas fa-shopping-cart"></i>加入購物車</p>
                    </a>

css:

1
2
3
4
5
6
7
/*「加入購物車」按鈕的 hover 效果*/
.add_cart:hover{
	background-color: #FF5E45;
}
.add_cart:hover p, .add_cart:hover i{
	color: #fff;
}