Đại lý vé máy bay giá rẻ nhất cả nước Nương Huỳnh
Tạo nút CSS với hiệu ứng di chuột, hiện Icon Font Awesome

Ban đầu, nút có đường viền và Text bên trong với nền trong suốt. Khi bạn di chuột vào, nền Fill màu và hiện Icon Font Awesome trông rất hấp dẫn.

Xem Demo

Trước khi chia sẻ mã nguồn, chúng ta hãy nói về nó. Đầu tiên, tôi đã tạo các nút đơn giản bằng thẻ <button>, sau đó tôi chèn một biểu tượng và văn bản bên trong nó. Bây giờ toàn bộ Code trông như sau: <button class="btn info"><i class="icon-class"></i><span>Text</span></button>.

Tôi đã đặt mỗi  Icon khác nhau cho mỗi nút bằng cách sử dụng thư viện biểu tượng Font Awesome. Như bạn có thể thấy trong bản xem Demo, có 4 nút với các biểu tượng và văn bản khác nhau . Đối với biểu tượng ẩn ban đầu tôi đã đặt các biểu tượng với margin-left: -100%;, khi di chuột giá trị của nó trở về 0%. Chúng ta sẽ thực hiện 2 công việc khi di chuột là loại bỏ giá trị lề của biểu tượng và tô màu nền.

 

 

Sau đó, tôi đã thực hiện một bước chuyển đổi để tạo hiệu ứng hoạt hình, giá trị chuyển tiếp là transition: all 300ms ease-in-out; . Có một hiệu ứng lấy nét mà bạn có thể thấy trong bản xem trước, bạn có thể thấy bằng cách nhấn vào nút Tab trên bàn phím. Để tạo điều đó, tôi chỉ cần sử dụng thuộc tính .btn:focus { value }.

Tất cả những điều còn lại bạn sẽ hiểu dễ dàng sau khi xem Code bên dưới, tôi không thể giải thích tất cả bằng văn bản. Bạn chỉ phải tạo 2 File. Một là HTML và một là CSS . Làm theo các bước để không có bất kỳ lỗi nào.

File Index.html

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Tạo nút CSS với hiệu ứng di chuột, hiện Icon Font Awesome</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
  <button class="btn info"><i class="fas fa-exclamation-circle"></i><span>info</span></button>
  <button class="btn success"><i class="fas fa-check-circle"></i><span>success</span></button>
  <button class="btn warning"><i class="fas fa-exclamation-triangle"></i><span>warning</span></button>
  <button class="btn danger"><i class="fas fa-times-circle"></i><span>danger</span></button>
</div>
</body>
</html>

File Style.css

body {
  padding-top: 15%;
  margin: 0 auto;
  text-align: center;
  background: #ececec;
}
.btn {
  font-weight: bold;
  font-size: 2rem;
  background-color: transparent;
  border: solid 3px;
  padding: 30px;
  margin: 10px 10px;
  display: inline-flex;
  overflow: hidden;
  cursor: pointer;
  transition: all 300ms ease-in-out;
}
.btn i, .btn span {
  width: 100%;
  display: block;
  padding: 0.7rem;
  margin: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  text-transform: uppercase;
}
.btn i {
  margin-left: -100%;
  transition: margin-left 300ms ease-in-out;
}
.btn:hover i {
  margin-left: 0;
}
.btn.info {
  color: #1489ff;
  border-color: #1489ff;
}
.btn.info:hover {
  color: #ffffff;
  background-color: #1489ff;
}
.btn.info:focus {
  box-shadow: 0 0 0 0.3rem rgba(20, 137, 255, 0.7);
}
.btn.success {
  color: #00ce0d;
  border-color: #00ce0d;
}
.btn.success:hover {
  color: #ffffff;
  background-color: #00ce0d;
}
.btn.success:focus {
  box-shadow: 0 0 0 0.3rem rgba(0, 206, 13, 0.7);
}
.btn.warning {
  color:  #fd9d08;
  border-color:  #fd9d08;
}
.btn.warning:hover {
  color: #ffffff;
  background-color:#fd9d08;
}
.btn.warning:focus {
  box-shadow: 0 0 0 0.3rem rgba(241, 218, 25, 0.7);
}
.btn.danger {
  color: #ff2323;
  border-color: #ff2323;
}
.btn.danger:hover {
  color: #ffffff;
  background-color: #ff2323;
}
.btn.danger:focus {
  box-shadow: 0 0 0 0.3rem rgba(255, 35, 35, 0.7);
}

Chúc các bạn thành công!

Đại lý vé máy bay giá rẻ nhất cả nước Nương Huỳnh

Hãy cho chúng tôi một lượt hoặc chia sẻ bài viết với bạn bè của bạn. Cảm ơn vì đã ghé thăm, hãy tiếp tục ghé thăm Tradevn.tech. Xin cám ơn!

 Hữu ích cho bạn:

Chia sẻ liên quanXem thêm

avatar
  Nhận thông tin qua email  
Nhận thông báo cho