Cách Tạo Nút Button Hiệu Ứng Hover Cực Đẹp Cho Blogger

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

Tạo Button Hiệu Ứng Hover Cực Đẹp

Bước 1: thêm CSS trước thẻ ]]></b:skin>

CSS/* 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

HTML<div class="btn-quidz">
  <div class="wrapper">
    <button class="hover-button">Nội Dung...</button>
  </div>
</div>

Bài đăng Mới hơn Bài đăng Cũ hơn