Nút liên kết css

Đầu vào

Ở bài học trước chúng ta đã hoàn thành công việc TẠO VIỀN CÔNG CHO NỀN - HÌNH ẢNH SỬ DỤNG CLIP PATH

See our courses

   

       
        selftaught
       
       
         is how you survive
       
   
   See our courses 

Trước tiên ta sẽ tạo các thuộc tính chung cho nút bằng cách mã CSS cho. btn

.btn,
.btn:link,
.btn:visited{
   
}

in which

• liên kết là thẻ bình thường, chưa được người dùng nhấp vào
• đã truy cập là thẻ a [liên kết] đã được người dùng nhấp vào ]

Nút Quan sát lại sản phẩm hoàn thiện

Ta could see

• Là thẻ a should have text-decoration default of the tag a should ta to. trang trí văn bản. không ai;
• nút chữ hoa. chuyển đổi văn bản. chữ hoa;
• Bán kính đường viền ở hai đầu. bán kính đường viền. 100px; . [1000px với 100px không có gì khác biệt]
• Tiếp theo là đặt phần đệm cho nút nhưng để làm điều đó trước hết chúng ta phải đặt. trưng bày. chặn Nội tuyến;
• At here to to. đệm. 15px 30px ;
• Font-size to 16px. cỡ chữ. 16px;

Mã CSS

.btn,
.btn:link,
.btn:visited{
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 40px;
    display: inline-block;
    border-radius: 100px;
    font-size: 16px;
}

Ta continue chỉnh sửa màu nền và văn bản của nút màu bằng cách chỉnh sửa CSS của. btn-trắng

• Chỉnh nền mày trắng [#ffffff]
• Màu văn bản là màu xám [#777777]

.btn-white{
    color: #777777;
    background-color: #fff;
}

Ở đây ta thấy vị trí của nút không nằm giữa. Ta sử dụng căn chỉnh văn bản. trung tâm; . hộp văn bản

Ta was the image button mong muốn

Mã hiệu ứng dụng của nút

KHI HOVER[ Lướt vào, trỏ vào]

Ta muốn khi di chuột nút có nhích lên 1 chút và có bóng khi di chuột, ta điều chỉnh CSS của. btn. bay lượn

• To Move Up Use Transformation. dịchY[-3px];
• Để có bóng ta sử dụng box-shadow. 0 5px 20px rgba[0,0,0,. 2];

bóng hộp. offset ngang/ offset dọc/ độ mờ / đổ bóng màu

Chú thích. Đây hoàn toàn là các thông số sử dụng cá nhân, bạn có thể thay đổi sao cho thích hợp VD. dịchY[-10px];

KHI ACTIVE[khi click]

Khi kích hoạt, hãy nhấn nút nhấn xuống để tiếp tục sử dụng các thuộc tính CSS trong. btn. tích cực

• biến đổi. dịchY[-1px];
• bóng hộp. 0 5px 10px rgba[0,0,0,. 2];

Nếu trường hợp bạn nhấp vào xuất hiện viền xanh bên ngoài thì đó chính là phác thảo [cũng tùy chọn trình duyệt nữa] nên để đảm bảo mình thiết lập thêm

Vì vậy, chúng ta đã hoàn thành hiệu ứng kích hoạt của nút

Mã CSS

.btn,
.btn:link,
.btn:visited{
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 40px;
    display: inline-block;
    border-radius: 100px;
    font-size: 16px;
}

.btn:hover{
    transform: translateY[-3px];
    box-shadow: 0 5px 20px rgba[0, 0, 0, .2];
}

.btn:active{
    outline: none;
    transform: translateY[-1px];
    box-shadow: 0 5px 10px rgba[0, 0, 0, .2];
}
.btn-white{
    color: #777777;
    background-color: #fff;
}

Kết luận

Ở bài viết này, chúng ta đã xây dựng xong giao diện và hiệu ứng kích hoạt nút cho trang đích của trang web

Trong bài viết sau chúng ta sẽ cùng nhau TẠO bọc ỨNG DỤNG ZOOM OUT, ZOOM IN CỦA BUTTON KHI HOVER

Cảm ơn các bạn đã theo dõi bài viết. Vui lòng rút lại bình luận và đóng góp ý kiến ​​của mình để giúp phát triển bài viết tốt hơn. đừng quên. "Luyện tập – Thử thách – Không sợ khó"

Load down

Dự án

Nếu công việc thực hiện theo hướng dẫn không thể hiện ra các phần như mong muốn. Bạn cũng có thể tải xuống DỰ ÁN THAM KHẢO ở liên kết bên dưới

Thảo luận

Nếu bạn gặp bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam. com to get the support from the community