SnippetUI
← Back to snippets

Tombol Cyberpunk

Komponen tombol futuristik dengan efek neon dan animasi glitch yang tampak bagus pada tema gelap.

HTMLCSS

Pratinjau

Tombol dengan cahaya neon dan efek kesalahan saat mengarahkan kursor, cocok untuk tema gelap atau UI yang terinspirasi fiksi ilmiah.

Kasus penggunaan dan fitur

  • Cyberpunk/SF Taste: Ideal untuk proyek yang ingin menciptakan pandangan dunia yang luar biasa atau futuristik, seperti UI game, layanan Web3, dan portofolio kreatif.

  • Efek cahaya neon dan glitch: Warna dasar berubah saat melayang dan animasi glitch liar diaktifkan, memberikan dampak yang kuat kepada pengguna.

  • Gambar bentuk ringan menggunakan clip-path: Bentuk unik dengan sudut yang hilang hanya ditampilkan dengan clip-path CSS tanpa menggunakan gambar, sehingga bentuknya ringan dan tidak bergantung pada resolusi.

Poin desain dan UX

  1. Umpan balik visual yang jelas: Perubahan dinamis saat mengarahkan kursor (transisi warna dari cyan ke magenta dan bersinar) secara intuitif menyampaikan bahwa elemen tersebut bersifat interaktif.

  2. Efek 3D dengan banyak lapisan: Bingkai mekanis dengan kedalaman dibuat dengan menggabungkan elemen semu (::before, ::after) dan elemen dekoratif (.decoration).

  3. Pertimbangan aksesibilitas: aria-hidden="true" ditambahkan ke teks yang disalin untuk efek kesalahan guna mencegah duplikat pembacaan oleh pembaca layar, dll.

Cara menyesuaikan

Anda dapat dengan mudah membuat tombol cyberpunk yang sesuai dengan warna tema proyek Anda hanya dengan menimpa variabel CSS.


.cyber-btn {

  /* メインカラー（通常時の色） */

  --primary-color: #00ffcc;

  

  /* セカンダリカラー（ホバー時の色） */

  --secondary-color: #ff00ff;

  

  /* 背景色（内側の暗い部分） */

  --bg-color: #050505;

}

Dengan menentukan font monospace (monospace), Anda dapat lebih menekankan suasana layar peretasan atau konsol sistem.

Kode implementasi

<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>

Status kompatibilitas peramban

Ia menggunakan clip-path dan animasi CSS standar untuk menggambar, dan berfungsi dengan baik di browser utama modern.

  • Krom: 55+

  • Firefox: 54+

-Safari: 10.1+

-Tepi: 79+