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>

N

10

Chia sẻ

• Nhận liên kết

Nguyễn Phú Cường

Cuộc sống đôi lúc không như chúng ta mong muốn nhưng đừng buồn, đừng suy nghĩ nhiều quá mà hãy tiếp tục đứng lên và chiến đấu tiếp vì tương lai của chính mình nhé!