Một nút có ánh sáng neon và hiệu ứng trục trặc khi di chuột, hoàn hảo cho các chủ đề tối hoặc giao diện người dùng lấy cảm hứng từ khoa học viễn tưởng.
Cyberpunk/SF Taste: Lý tưởng cho các dự án muốn tạo ra một thế giới quan phi thường hoặc tương lai, chẳng hạn như giao diện người dùng trò chơi, dịch vụ Web3 và danh mục đầu tư sáng tạo.
Hiệu ứng ánh sáng neon và trục trặc: Màu cơ bản thay đổi khi di chuột và hoạt ảnh trục trặc hoang dã được kích hoạt, mang lại tác động mạnh mẽ cho người dùng.
Vẽ hình dạng nhẹ bằng clip-path: Các hình dạng độc đáo bị thiếu góc chỉ được thể hiện bằng CSS clip-path mà không sử dụng hình ảnh, vì vậy chúng hoạt động nhẹ và không phụ thuộc vào độ phân giải.
Phản hồi trực quan rõ ràng: Các thay đổi động khi di chuột (chuyển màu từ lục lam sang đỏ tươi và sáng) truyền đạt một cách trực quan rằng phần tử này có tính tương tác.
Hiệu ứng 3D với nhiều lớp: Một khung cơ học có chiều sâu được xây dựng bằng cách kết hợp các phần tử giả (::before, ::after) và các phần tử trang trí (.decoration).
Cân nhắc về khả năng truy cập: aria-hidden="true" được thêm vào văn bản được sao chép để tạo hiệu ứng trục trặc nhằm ngăn chặn việc đọc trùng lặp của trình đọc màn hình, v.v.
Bạn có thể dễ dàng tạo các nút cyberpunk phù hợp với màu sắc chủ đề của dự án bằng cách ghi đè các biến CSS.
.cyber-btn {
/* メインカラー（通常時の色） */
--primary-color: #00ffcc;
/* セカンダリカラー（ホバー時の色） */
--secondary-color: #ff00ff;
/* 背景色（内側の暗い部分） */
--bg-color: #050505;
}
Bằng cách chỉ định phông chữ đơn cách (monospace), bạn có thể nhấn mạnh hơn nữa bầu không khí của màn hình hack hoặc bảng điều khiển hệ thống.
<button class="cyber-btn">
<span class="main-text">SYSTEM_READY</span>
<span class="glitch-text" aria-hidden="true">SYSTEM_READY</span>
<span class="decoration"></span>
</button>
<style>
/* カスタムプロパティと基本スタイル */
.cyber-btn {
--primary-color: #00ffcc;
--secondary-color: #ff00ff;
--bg-color: #050505;
position: relative;
padding: 1rem 2.5rem;
font-family: 'Courier New', Courier, monospace;
font-size: 1.2rem;
font-weight: bold;
letter-spacing: 0.15em;
color: var(--primary-color);
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
text-transform: uppercase;
}
/* 背景レイヤー */
.cyber-btn::before,
.cyber-btn::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
transition: all 0.3s ease;
}
/* 外側のフレーム（角欠け形状） */
.cyber-btn::before {
background-color: var(--primary-color);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
z-index: -2;
}
/* 内側の背景（フレームとの差分でボーダーを表現） */
.cyber-btn::after {
background-color: var(--bg-color);
clip-path: polygon(2px 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - 16px), calc(100% - 16px) calc(100% - 2px), 2px calc(100% - 2px));
z-index: -1;
}
/* グリッチ用の隠しテキスト */
.cyber-btn .glitch-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--bg-color);
color: var(--secondary-color);
clip-path: polygon(2px 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - 16px), calc(100% - 16px) calc(100% - 2px), 2px calc(100% - 2px));
opacity: 0;
z-index: 1;
}
/* メインテキスト */
.cyber-btn .main-text {
position: relative;
z-index: 2;
text-shadow: 0 0 8px rgba(0, 255, 204, 0.5);
transition: all 0.3s ease;
}
/* ホバー時のスタイル変更 */
.cyber-btn:hover::before {
background-color: var(--secondary-color);
box-shadow: 0 0 20px var(--secondary-color);
}
.cyber-btn:hover .main-text {
opacity: 0;
}
.cyber-btn:hover .glitch-text {
opacity: 1;
animation: cyber-glitch-anim 0.25s cubic-bezier(.25, .46, .45, .94) both infinite;
}
/* 右下の小さな三角形の装飾 */
.cyber-btn .decoration {
position: absolute;
bottom: -1px;
right: -1px;
width: 20px;
height: 20px;
background-color: var(--primary-color);
clip-path: polygon(100% 0, 100% 100%, 0 100%);
z-index: 3;
transition: all 0.3s ease;
}
.cyber-btn:hover .decoration {
background-color: var(--secondary-color);
box-shadow: 0 0 10px var(--secondary-color);
}
/* グリッチアニメーションの定義 */
@keyframes cyber-glitch-anim {
0% {
clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
transform: translate(-4px, 2px);
color: var(--primary-color);
}
20% {
clip-path: polygon(0 40%, 100% 40%, 100% 50%, 0 50%);
transform: translate(4px, -2px);
color: #fff;
}
40% {
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
transform: translate(-4px, 2px);
color: var(--secondary-color);
}
60% {
clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%);
transform: translate(4px, 2px);
color: var(--primary-color);
}
80% {
clip-path: polygon(0 80%, 100% 80%, 100% 90%, 0 90%);
transform: translate(-2px, -2px);
color: #ff0;
}
100% {
clip-path: polygon(0 50%, 100% 50%, 100% 60%, 0 60%);
transform: translate(2px, -2px);
color: var(--secondary-color);
}
}
</style>Nó sử dụng clip-path và hoạt ảnh CSS tiêu chuẩn để vẽ và hoạt động tốt trong các trình duyệt chính hiện đại.
Chrome: 55+
Firefox: 54+
Safari: 10.1+
-Cạnh: 79+