Hiệu ứng phát sáng trên các nút CSS bằng HTML & CSS

Khoảng 5 phút đọc - Người đăng: Administrator

Xin chào các độc giả, Hôm nay trong blog này, bạn sẽ tìm hiểu cách tạo Hiệu ứng phát sáng trên các nút chỉ trong HTML & CSS. Trước đây tôi đã chia sẻ Hiệu ứng phát sáng trong các nút phương tiện truyền thông xã hội , bây giờ đã đến lúc tạo hiệu ứng phát sáng này trong các nút.

Nút là một yếu tố UI cơ bản sẽ ảnh hưởng lớn đến thiết kế tương tác của bạn. Các nút có sức mạnh để buộc người dùng chuyển đổi, để thực hiện một hành động. Các nút là người trung gian giữa người dùng và sản phẩm và chịu trách nhiệm duy trì cuộc trò chuyện giữa người và máy.

Như bạn có thể thấy trong hình ảnh, có hai nút với hiệu ứng phát sáng nền mát mẻ. Những màu nền là gradient. Một gradient fill là một hiệu ứng đồ họa tạo ra giao diện màu ba chiều bằng cách trộn một màu này với màu khác. Nhiều màu sắc có thể được sử dụng, trong đó một màu dần dần mờ đi và thay đổi sang màu khác, chẳng hạn như màu xanh lam chuyển thành màu trắng hiển thị bên dưới.

Lúc đầu, các nút này đang ở giai đoạn ban đầu, nơi không có hiệu ứng phát sáng trên nền. Nhưng khi bạn di chuột vào nút cụ thể thì hiệu ứng phát sáng bắt đầu. Hiệu ứng này hoàn toàn chỉ dựa trên CSS.

Nếu bạn cảm thấy khó hiểu những gì tôi thực sự nói. Bạn có thể xem một video hướng dẫn đầy đủ về chương trình này hoặc thiết kế bên dưới.

Hiệu ứng phát sáng trên Nút bằng HTML & CSS [Mã nguồn]

Như mọi khi, trước khi chia sẻ mã của hiệu ứng phát sáng này. Chúng ta hãy nói về các thẻ chính và mã hiệu ứng. Trong video, bạn đã thấy nút này và hiệu ứng phát sáng của nó chỉ dựa trên HTML & CSS. Trong Tệp HTML, tôi đã tạo thẻ <button>. Phần tử <button> HTML đại diện cho nút có thể nhấp, được sử dụng để gửi biểu mẫu hoặc bất kỳ nơi nào trong tài liệu để có thể truy cập, chức năng nút tiêu chuẩn. Các nút HTML được trình bày theo kiểu giống với nền tảng mà tác nhân người dùng chạy trên, nhưng bạn có thể thay đổi giao diện của các nút bằng CSS.

 

Trong Tệp CSS, Đầu tiên bằng cách sử dụng * bộ chọn, tôi đặt lại lề mặc định và đệm thành 0; Trình duyệt tự động mất. Bộ chọn phổ quát CSS chọn bất kỳ loại phần tử nào trong trang HTML. Nó phù hợp với một yếu tố duy nhất. ... Điều này hữu ích khi bạn muốn đặt kiểu cho tất cả các thành phần của trang HTML hoặc cho tất cả các thành phần trong một thành phần của trang HTML. 

 

Sau đó, tôi đặt một nút ở trung tâm bằng thuộc tính Flexbox. Sau đó, tôi đã tạo kiểu cơ bản cho nút như tôi đã cho các giá trị màu, chiều rộng chiều rộng, cỡ chữ, v.v. Sau đó, sử dụng :: trước phần tử giả tôi đã tạo nền lớp gradient để hiển thị hiệu ứng phát sáng trên Nút và cho độ mờ 0 ; để ẩn lớp đó. Sau đó, tôi tạo hoạt hình và đặt tên của hoạt hình này là "animate". Cuối cùng, bằng cách sử dụng thuộc tính @keyframes, tôi đã di chuyển màu gradient đó một cách ngẫu nhiên.

Có nhiều thứ tôi để lại. Bởi vì tôi không thể nói tất cả mọi thứ bằng văn bản. Tôi chỉ nói về khái niệm chính và những thứ. Nhưng, đừng lo lắng bạn sẽ hiểu tất cả các mã và chương trình sau khi nhận được mã nguồn của chương trình này.

Để tạo hiệu ứng phát sáng này trên nút. Trước tiên, bạn cần tạo hai Tệp một tệp HTML và một tệp khác là Tệp CSS. Sau khi tạo các tệp này, chỉ cần dán các mã sau vào tệp của bạn.

 
<!DOCTYPE html>
 
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Glowing Button on Hover</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <button>Hover Me</button>
  </body>
</html>

 

Code Css

@import url("https://fonts.googleapis.com/css?family=Raleway:300");

*{  margin: 0; padding: 0}

body{display: flex;height: 100vh;background: black;align-items: center;justify-content: center;}

button{  position: relative;height: 60px;width: 200px;border: none;outline: none;color: white;background: #111;cursor: pointer;border-radius: 5px;font-size: 18px;font-family: 'Raleway', sans-serif;}

button:before{

  position: absolute;

  content: '';

  top: -2px;

  left: -2px;

  height: calc(100% + 4px);

  width: calc(100% + 4px);

  border-radius: 5px;

  z-index: -1;

  opacity: 0;

  filter: blur(5px);

  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);

  background-size: 400%;

  transition: opacity .3s ease-in-out;

  animation: animate 20s linear infinite;

}

button:hover:before{

  opacity: 1;

}

button:hover:active{

  background: none;

}

button:hover:active:before{

  filter: blur(2px);

}

@keyframes animate {

  0% { background-position: 0 0; }

  50% { background-position: 400% 0; }

  100% { background-position: 0 0; }

}