1.普通狀態2，滑鼠hover狀態 3.active 點擊狀態 4.focus 取得焦點狀態
focus 經常用來取消a連結點擊後產生的虛線邊框
a:focus{
outline: none;
}
<!DOCTYPE html> <html>
<head>
<title></title>
<meta charset="gbk">
<style type="text/css">
.btn {
color: white;
background-color: #008aa6;
padding: 0px 1em;
height: 22px;
margin-left: 10px;
border: 0px solid black;
border-radius: 5px;
}
.btn:hover {
background-color: #ff0000;
}
/*active 要在後面 否則會被hover覆蓋*/
.btn:focus {
background-color: #00ff00;
}
.btn:active {
background-color: #000000;
}
</style>
</head>
<body>
<button class="btn">hehhe</button>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
