Botón Cyberpunk

Vista previa

Un botón con un brillo de neón y un efecto de falla al pasar el mouse, perfecto para temas oscuros o interfaces de usuario inspiradas en la ciencia ficción.

Casos de uso y características

Cyberpunk/SF Taste: Ideal para proyectos que desean crear una visión del mundo extraordinaria o futurista, como UI de juegos, servicios Web3 y portafolios creativos.
Efectos de brillo de neón y fallas: el color base cambia al pasar el mouse y se activa una animación de falla salvaje, lo que le brinda al usuario un fuerte impacto.
Dibujo de formas livianas usando clip-path: las formas únicas a las que les faltan esquinas se expresan solo con CSS clip-path sin usar imágenes, por lo que funcionan de manera liviana e independiente de la resolución.

Puntos de diseño y UX

Retroalimentación visual clara: los cambios dinámicos al pasar el mouse (transición de color de cian a magenta y brillo) comunican intuitivamente que el elemento es interactivo.
Efecto 3D con múltiples capas: Se construye un marco mecánico con profundidad combinando pseudoelementos (::before, ::after) y elementos decorativos (.decoration).
Consideraciones de accesibilidad: aria-hidden="true" se agrega al texto copiado para lograr el efecto de falla y evitar lecturas duplicadas por parte de lectores de pantalla, etc.

Cómo personalizar

Puedes crear fácilmente botones cyberpunk que coincidan con los colores del tema de tu proyecto simplemente sobrescribiendo las variables CSS.


.cyber-btn {

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

  --primary-color: #00ffcc;

  

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

  --secondary-color: #ff00ff;

  

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

  --bg-color: #050505;

}

Al especificar una fuente monoespaciada (“monoespaciada”), puede enfatizar aún más la atmósfera de una pantalla de piratería o de una consola del sistema.

Código de implementación

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

Estado de compatibilidad del navegador

Utiliza clip-path y animaciones CSS estándar para dibujar, y funciona bien en los principales navegadores modernos.

Cromo: 55+
Firefox: 54+
Safari: 10.1+

-Borde: 79+