Sử dụng : di chuột bộ chọn để thêm hiệu ứng di chuột. Để tạo hiệu ứng làm tròn, hãy sử dụng bán kính đường viền bất động sản. Bạn có thể thử chạy mã sau để đặt nút hoạt động và di chuột được làm tròn bằng CSS:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
display: inline-block;
}
.demo a {
color: red;
padding: 5px 12px;
text-decoration: none;
border-radius: 5px;
}
.demo a.active {
background-color: orange;
color: white;
border-radius: 5px;
}
.demo a:hover:not(.active) {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Our Quizzes</h2>
<div class = "demo">
<a href = "prev.html"><</a>
<a href = "quiz1.html">Quiz1</a>
<a href = "quiz2.html">Quiz2</a>
<a href = "quiz3.html">Quiz3</a>
<a href = "quiz4.html" class = "active">Quiz4</a>
<a href = "next.html">></a>
</div>
</body>
</html>