Thanh Menu Tiện ích Đẹp CSS icon Cực Đẹp Cho Blog

Chào bạn! hôm nay mình sẽ chia sẻ với các bạn một iện ích CSS cho blog rất đẹp, nếu bạn sở hữu cho mình 1 website bán hàng chuyên nghiệp đầy đủ mọi tính năng, thì hãy liên lệ với chúng tôi hoặc nhấn nút đăng ký khóa học làm web không cần biết lập trình. Chỉ trong thời gian ngắn là bạn có thể tự thiết kế cho mình một website ưng ý nhất. và bây giờ mình bắt đầu chèn, phần CSS và HTML.

Bước 1: Chèn mã HTML bên dưới

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="icon-bar">
 <a class="active" href="#"></a>
 <a href="#"></a>
 <a href="#"></a>
 <a href="#"></a>
 <a href="#"></a>
</div>

Bước 2: Chèn mã CSS

.icon-bar {
width: 90px; /* Set a specific width */
background-color: #555; /* Dark-grey background */}

.icon-bar a {
display: block; /* Make the links appear below each other instead of side-by-side */
  text-align: center; /* Center-align text */
padding: 16px; /* Add some padding */
transition: all 0.3s ease; /* Add transition for hover effects */
color: white; /* White text color */
font-size: 36px; /* Increased font-size */}

.icon-bar a:hover {
  background-color: #000; /* Add a hover color */}

.active {
  background-color: #4CAF50; /* Add an active/current color */}

Bước 1: Chèn mã HTML bên dưới

Bước 2: Chèn mã CSS

Bài cùng chuyên mục

Bài cùng tác giả