Hướng dẫn tạo loading buttons với CSS - Demo
RUN
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://freetuts.net/cnd/css/fontawesome/4.7.0/css/font-awesome.min.css"> <style> .container { width: 500px; margin: auto; } /* Định dạng cho button */ .buttonload { background-color: #4CAF50; /* Màu nền */ border: none; /* không hiển thị border */ color: white; /* Màu chữ */ padding: 12px 16px; /* thêm padding */ font-size: 16px /* cỡ chữ */ } .fa { margin-left: -12px; margin-right: 8px; } </style> </head> <body> <div class="container"> <h2>Freetuts.net hướng dẫn tạo loading button</h2> <button class="buttonload"> <i class="fa fa-spinner fa-spin"></i>Loading </button> <button class="buttonload"> <i class="fa fa-circle-o-notch fa-spin"></i>Loading </button> <button class="buttonload"> <i class="fa fa-refresh fa-spin"></i>Loading </button> </div> </body> </html>
PHÓNG TO