NỘI DUNG (HIGHLIGHTS)
Hướng dẫn tạo Button hiệu ứng Neon cho WordPress: Button là một thứ khá là cần thiết cho những website dạng chia sẻ nhất là với những Blog chuyên chia sẻ phần mềm. Các button có hiệu ứng thì sẽ làm nổi bật nút làm cho người dùng dễ dàng trong việc download hơn.
Hướng dẫn tạo Button hiệu ứng Neon cho WordPress
Việc tạo cũng khá đơn giản các bạn cứ làm theo các bước bên dưới này là bạn làm đươc thôi. Trong bài chia sẻ này sẽ có 2 phần: 1 là phần html và 2 là phần CSS làm đẹp cho button.
1. Html cho Button
Các bạn copy đoạn code html bên dưới đây và chèn vào những nơi nào mà bạn muốn hiển thị nhé.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<button class="neon-button">Neon Button</button>
</body>
</html>
2. CSS
Sau khi bạn đã thêm html cho button tiếp theo bạn sẽ phải theo là bạn sẽ phải thêm code CSS cho nó để cho nó đẹp hơn.
body {
height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
button.neon-button {
border: 3px solid #ffa9b7;
background: #fff;
padding: 16px 32px;
border-radius: 10px;
font-family: "Roboto", sans-serif;
font-size: 32px;
text-transform: uppercase;
color: #ffa9b7;
letter-spacing: 8px;
font-weight: bold;
margin: 24px;
cursor: pointer;
}
button.neon-button:hover {
animation: flicker 400ms linear forwards;
}
@keyframes flicker {
5% {
border-color: #fa032c;
color: #fa032c;
text-shadow: 0 0 4px #ff4262;
box-shadow: 0 0 16px 0 #ff4262, inset 0 0 8px 0 #ff4262;
}
10% {
border-color: #ff4262;
color: #ff4262;
box-shadow: unset;
text-shadow: unset;
}
55% {
border-color: #fa032c;
color: #fa032c;
text-shadow: 0 0 4px #ff4262;
box-shadow: 0 0 16px 0 #ff4262, inset 0 0 8px 0 #ff4262;
}
75% {
border-color: #fa032c;
color: #fa032c;
text-shadow: 0 0 4px #ff4262;
box-shadow: 0 0 16px 0 #ff4262, inset 0 0 8px 0 #ff4262;
}
80% {
border-color: #ff4262;
color: #ff4262;
box-shadow: unset;
text-shadow: unset;
}
100% {
border-color: #fa032c;
color: #fa032c;
text-shadow: 0 0 4px #ff4262;
box-shadow: 0 0 16px 0 #ff4262, inset 0 0 8px 0 #ff4262;
}
}
Xong chỉ thế thôi, các bạn quay lại bài viết hoặc page mà bạn đã thêm code để tận hưởng nhé.
Hy vọng với hướng dẫn tạo Button hiệu ứng Neon cho WordPress mà BLog thủ thuật máy tính f4vnn đã chia sẻ sẽ có ích với bạn. Chúc bạn thành công.
Bài Viết Cùng Chuyên MụcGame & Apk Mod Acapella Việt Template BLogspot Liên Kết URL