Cyberpunk-Button

Vorschau

Eine Schaltfläche mit Neonlicht und Glitch-Effekt beim Schweben, perfekt für dunkle Themen oder von Science-Fiction inspirierte Benutzeroberflächen.

Anwendungsfälle und Funktionen

Cyberpunk/SF-Geschmack: Ideal für Projekte, die eine außergewöhnliche oder futuristische Weltanschauung schaffen möchten, wie z. B. Spiele-UI, Web3-Dienste und kreative Portfolios.
Neon-Glühen und Glitch-Effekte: Die Grundfarbe ändert sich beim Schweben und eine wilde Glitch-Animation wird aktiviert, die dem Benutzer eine starke Wirkung verleiht.
Leichte Formzeichnung mit „Clip-Pfad“: Einzigartige Formen mit fehlenden Ecken werden nur mit CSS „Clip-Pfad“ ohne Verwendung von Bildern ausgedrückt, sodass sie schlank und unabhängig von der Auflösung funktionieren.

Design- und UX-Punkte

Klares visuelles Feedback: Dynamische Änderungen beim Hover (Farbübergang von Cyan zu Magenta und Leuchten) kommunizieren intuitiv, dass das Element interaktiv ist.
3D-Effekt mit mehreren Schichten: Ein mechanischer Rahmen mit Tiefe wird durch die Kombination von Pseudoelementen („::before“, „::after“) und dekorativen Elementen („.decoration“) konstruiert.
Überlegungen zur Barrierefreiheit: „aria-hidden=“true”` wird dem kopierten Text hinzugefügt, um den Glitch-Effekt zu verhindern und doppeltes Lesen durch Bildschirmleseprogramme usw. zu verhindern.

So passen Sie es an

Sie können ganz einfach Cyberpunk-Schaltflächen erstellen, die den Designfarben Ihres Projekts entsprechen, indem Sie einfach CSS-Variablen überschreiben.


.cyber-btn {

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

  --primary-color: #00ffcc;

  

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

  --secondary-color: #ff00ff;

  

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

  --bg-color: #050505;

}

Durch die Angabe einer Monospace-Schriftart („Monospace“) können Sie die Atmosphäre eines Hacking-Bildschirms oder einer Systemkonsole noch weiter betonen.

Implementierungscode

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

Browserkompatibilitätsstatus

Es verwendet „Clip-Path“ und Standard-CSS-Animationen zum Zeichnen und funktioniert gut in modernen, gängigen Browsern.

Chrom: 55+
Firefox: 54+
Safari: 10.1+

-Kante: 79+