Un bouton avec une lueur néon et un effet glitch au survol, parfait pour les thèmes sombres ou les interfaces utilisateur inspirées de la science-fiction.
Cyberpunk/SF Taste : Idéal pour les projets qui souhaitent créer une vision du monde extraordinaire ou futuriste, comme l’interface utilisateur de jeu, les services Web3 et les portefeuilles créatifs.
Effets de lueur et de glitch au néon : La couleur de base change en survol et une animation de glitch sauvage est activée, donnant à l’utilisateur un fort impact.
Dessin de forme légère à l’aide de clip-path : les formes uniques avec des coins manquants sont exprimées uniquement avec clip-path CSS sans utiliser d’images, elles fonctionnent donc de manière légère et indépendante de la résolution.
Retour visuel clair : les changements dynamiques en survol (transition de couleur du cyan au magenta et lueur) communiquent intuitivement que l’élément est interactif.
Effet 3D avec plusieurs couches : Un cadre mécanique avec de la profondeur est construit en combinant des pseudo-éléments (::before, ::after) et des éléments décoratifs (.decoration).
Considérations sur l’accessibilité : aria-hidden="true" est ajouté au texte copié pour l’effet glitch afin d’éviter une lecture en double par les lecteurs d’écran, etc.
Vous pouvez facilement créer des boutons cyberpunk qui correspondent aux couleurs du thème de votre projet en écrasant simplement les variables CSS.
.cyber-btn {
/* メインカラー（通常時の色） */
--primary-color: #00ffcc;
/* セカンダリカラー（ホバー時の色） */
--secondary-color: #ff00ff;
/* 背景色（内側の暗い部分） */
--bg-color: #050505;
}
En spécifiant une police monospace (« monospace »), vous pouvez accentuer davantage l’atmosphère d’un écran de piratage ou d’une console système.
##Code d’implémentation
<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>Il utilise clip-path et des animations CSS standard pour le dessin et fonctionne bien dans les principaux navigateurs modernes.
-Chrome : 55+
-Safari : 10.1+
-Bord : 79+