Google Drive direct download link generator

Trình tạo liên kết html

Get Code

Kết quả

"Theo dõi Nguyễn Ngọc Quí Đz thường xuyên để cập nhật các bài viết mới nhé"
Xin chào các bạn mình đã quay lại rồi đây đã lâu rồi mình không đăng bài thì hôm nay mình xin chia sẻ chút thủ thuật nhỏ, tạo nút button với hiệu ứng hover cực đẹp cho blogger

Cách Tạo Nút Button Hiệu Ứng Hover Cực Đẹp Cho Blogger
Tạo Button Hiệu Ứng Hover Cực Đẹp
Bước 1: thêm CSS trước thẻ ]]></b:skin>
/* Hover Button */
.btn-quidz {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.btn-quidz {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.hover-button {
  color: white;
  font-family: 'Roboto', helvetica;
  background-color: dodgerblue;
  border: 0;
  border-radius: 0.5rem;
  padding: 1rem 2rem;
  font-size: 1rem;
  cursor: pointer;
  letter-spacing: 4px;
  font-weight: 100;
  text-transform: uppercase;
  -webkit-box-shadow: 16px 26px 35px 0px rgba(0, 0, 0, 0.3);
          box-shadow: 16px 26px 35px 0px rgba(0, 0, 0, 0.3);
  -webkit-transition: background-color 150ms linear, -webkit-box-shadow 150ms linear, -webkit-transform 150ms linear;
  transition: background-color 150ms linear, -webkit-box-shadow 150ms linear, -webkit-transform 150ms linear;
  transition: box-shadow 150ms linear, background-color 150ms linear, transform 150ms linear;
  transition: box-shadow 150ms linear, background-color 150ms linear, transform 150ms linear, -webkit-box-shadow 150ms linear, -webkit-transform 150ms linear;
}
.hover-button:hover {
  -webkit-transform: scale(0.98);
          transform: scale(0.98);
  background-color: #0077ea;
  -webkit-box-shadow: 6px 8px 8px 0px rgba(0, 0, 0, 0.3);
          box-shadow: 6px 8px 8px 0px rgba(0, 0, 0, 0.3);
}
.hover-button:active {
  -webkit-transform: scale(0.97);
          transform: scale(0.97);
  background-color: #006ad1;
  -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.3);
          box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.3);
}
.hover-button:focus {
  outline: 0;
}
Bước 2: khi viết bài chuyển sang soạn thảo HTML và dán đoạn code bên dưới
<div class="btn-quidz">
  <div class="wrapper">
    <button class="hover-button">Nội Dung...</button>
  </div>
</div>
Tác giả: Nguyễn Ngọc Quí Đz
Ngày đăng: 25/03/2018 lúc 3/25/2018
Tổng số bình luận: 10

CHIA SẺ BÀI VIẾT CHO MỌI NGƯỜI:

Có 10 bình luận/ Cách Tạo Nút Button Hiệu Ứng Hover Cực Đẹp Cho Blogger

Bấm Thông báo cho tôi để nhận tin khi admin trả lời