thực hành - tạo nút next/ prev button

Trong bài thực hành này, chúng ta sẽ tạo nút button Next/ Preview bằng HTML và CSS

Nút next/ prev button

Cách tạo nút next/ prev button

Bước 1) Thêm HTML:

Ví dụ

<div class="container1">
    <button class="button">&laquo; Preview</button>
    <button class="button">Next &raquo;</button>
</div>

Bước 2) Thêm CSS:

Ví dụ

.container1, .container2, .container3 {
    margin-top:10px;    
}
/* Tạo kiểu cho các nút button */
.button {
    border:none;
    outline:none;
    text-align:center;
    font-size:28px;    
    color:white;
    cursor:pointer;
    margin:5px;
}
.container1 .button {
    padding:10px 15px;    
    background-color:#428bca;
}
/* Thêm hiệu ứng chuyển background khi hover */
.container1 .button:hover {
    background-color:red;    
}
.container2 .button {
    padding:10px 20px;
    background-color:black;    
}
.container2 .button:hover {
    background-color:royalblue;
}
.container3 .button {
    padding:10px 20px;
    background-color:gray;
    border-radius:50%;    
}
.container3 .button:hover {
    background-color:orange;    
}