Los botones CSS son lo primero con lo que un visitante interactúa en un sitio web. Un buen botón atrae la mirada, invita a la acción y funciona sin JavaScript en dispositivos móviles. Uno malo se camufla con el fondo y no ofrece ninguna respuesta al pulsarlo. Sin embargo, la mayoría de los botones tienen el mismo aspecto: un rectángulo plano, un cambio de color al pasar el cursor y nada más. Pero un botón puede ser un elemento de diseño por derecho propio, con animación, un efecto 3D, relleno degradado o un icono que se desliza al pasar el cursor.

Uno de los conjuntos de botones creativos más conocidos es CreativeButtons del estudio Codrops. Es una colección de ocho categorías de estilos que van desde bordes minimalistas hasta transformaciones volumétricas en 3D. El código fuente es abierto, el código está limpio y la página de demostración sigue funcionando 13 años después de su publicación. En este artículo, veremos qué estilos incluye el conjunto, cómo añadirlos a cualquier sitio web y cómo integrarlos con WordPress mediante functions.php.

💡 Resumen rápido:

• Descargue el archivo del repositorio de Codrops en GitHub, que contiene todos los archivos CSS y el marcado de demostración
• Vincule component.css y default.css a su proyecto, copie el marcado HTML del estilo de botón que necesite
• Para WordPress, añada wp_enqueue_style en el functions.php de su tema, especificando la ruta a los archivos en la carpeta del tema
• Personalice colores y tamaños para que combinen con su diseño: sobrescriba las propiedades CSS en una hoja de estilos hija
• Vea el tutorial de efectos CSS para botones a continuación para ver las animaciones en acción

Qué es CreativeButtons

Codrops publicó CreativeButtons en junio de 2013 como una demostración de las capacidades expresivas de CSS3. El conjunto incluye ocho categorías de estilos, cada una resolviendo su propia tarea visual:

Cada botón es puro HTML y CSS. Algunos estilos (como btn-4 con un icono) usan JavaScript para alternar clases al hacer clic, pero la magia principal reside en transition, transform y los pseudoelementos ::before y ::after.

Los iconos del conjunto provienen de la librería IcoMoon. Se insertan mediante el pseudoelemento ::before con un carácter de una fuente de iconos, lo que elimina la necesidad de cargar archivos SVG por separado.

Marcado HTML: un marco universal

El marcado del botón es intencionadamente simple. El desarrollador añade una clase común y dos numeradas a un elemento <button>:

1
<button class="btn btn-6 btn-6d">Button</button>

La clase btn restablece los estilos del navegador (borde, contorno, fondo). La clase btn-6 contiene propiedades comunes para la categoría (borde discontinuo, redondeo). La clase btn-6d es el estilo individual para un botón específico dentro de la categoría. Esta estructura de tres niveles permite combinar docenas de variaciones con una duplicación de código mínima.

Si el botón contiene un icono, se añade otra clase, por ejemplo, btn-4a icon-arrow-right. El icono se representa mediante ::before con un carácter de contenido de la fuente IcoMoon:

1
.btn-4a::before {
2
    content: "\e005";
3
    font-family: 'icomoon';
4
    margin-right: 8px;
5
}

Una nota importante: en la versión de demostración, las clases se separan únicamente con fines demostrativos. En un proyecto de producción, las propiedades para un estilo deben combinarse en una sola clase, lo que reduce el peso del selector y simplifica las sobrescrituras.

Estilos CSS: del restablecimiento a la animación

La clase base .btn hace lo mínimo: elimina el fondo, el borde y el relleno del navegador, establece cursor: pointer y position: relative (para posicionar los pseudoelementos). Toda la expresividad proviene de las clases de categoría e individuales.

He aquí un ejemplo de estilos para el botón btn-6d (borde discontinuo con relleno al pasar el cursor):

1
/* Button 6d — dashed border with background fill */
2
.btn-6d {
3
    border: 2px dashed #226fbe;
4
    color: #226fbe;
5
    background: transparent;
6
    transition: all 0.3s ease;
7
}
8
 
9
.btn-6d:hover {
10
    background: #226fbe;
11
    color: #fff;
12
}

Aquí no hay magia, solo transition y el cambio de los valores de background y color al pasar el cursor. Este mismo principio es la base de las ocho categorías. La diferencia está en los detalles: algunas añaden transform: scale(), otras usan box-shadow para dar profundidad y otras animan mediante @keyframes para un ciclo de pulsación infinito.

Conexión con WordPress

Para que los botones funcionen en un tema de WordPress, debe subir los archivos CSS a la carpeta del tema e incluirlos mediante wp_enqueue_style. Cree una subcarpeta (por ejemplo, JS_CSS_Plugins/CreativeButtons/css/) en el directorio de su tema activo y copie allí component.css y default.css.

Luego añada esto a functions.php:

1
/**
2
 * Enqueue CreativeButtons CSS files.
3
 * Source: https://github.com/codrops/CreativeButtons
4
 */
5
function creativebuttons_enqueue_styles() {
6
    $theme_uri = get_template_directory_uri();
7
 
8
    wp_enqueue_style(
9
        'creativebuttons-component',
10
        $theme_uri . '/JS_CSS_Plugins/CreativeButtons/css/component.css',
11
        array(),
12
        '1.0.0'
13
    );
14
 
15
    wp_enqueue_style(
16
        'creativebuttons-default',
17
        $theme_uri . '/JS_CSS_Plugins/CreativeButtons/css/default.css',
18
        array(),
19
        '1.0.0'
20
    );
21
}
22
add_action( 'wp_enqueue_scripts', 'creativebuttons_enqueue_styles' );

Las dos funciones separadas del ejemplo original se han sustituido por una, lo que resulta más limpio y fácil de mantener. El orden de inclusión importa: primero component.css (estilos principales de categoría), luego default.css (estilos de botones individuales). Si hay un conflicto con su tema, sobrescriba las propiedades necesarias en una hoja de estilos hija con mayor prioridad.

Alternativas modernas: qué ha cambiado en 13 años

CreativeButtons es un conjunto probado por el tiempo, pero CSS ha avanzado mucho desde 2013. Si comienza un nuevo proyecto en 2026, considere herramientas más modernas:

• Variables CSS. En lugar de #226fbe codificado, use var(--btn-primary). Esto simplifica los cambios de esquema de color y el soporte para tema oscuro.
• Propiedades lógicas. padding-inline y margin-block en lugar de padding-left/right y margin-top/bottom, para que el botón se muestre correctamente en idiomas RTL sin código adicional.
• prefers-reduced-motion. Envuelva las animaciones en una consulta de medios y desactívelas para usuarios con sensibilidad al movimiento.
• Colecciones ya preparadas. Free Frontend mantiene una colección de más de 220 botones CSS con demostraciones en CodePen, y Uiverse ofrece más de 1900 opciones con compatibilidad con Tailwind.

Pero si necesita un conjunto minimalista y comprensible que no dependa de frameworks, CreativeButtons sigue siendo una opción excelente. El código se puede leer en media hora, modificar para cualquier diseño y no tiene dependencias.

Vea este breve tutorial sobre efectos hover en CSS, desde transiciones básicas hasta animaciones complejas en CSS puro:

El vídeo muestra claramente cómo funcionan las animaciones de transition, transform y keyframes en los botones. Después de verlo, podrá no solo replicar los estilos de CreativeButtons, sino también escribir sus propios efectos desde cero.

⁉️🤔 Preguntas frecuentes

¿Puedo usar CreativeButtons en proyectos comerciales?

Sí, el código fuente se distribuye libremente. El repositorio de GitHub no contiene una licencia explícita, pero Codrops publica los recursos de demostración como disponibles públicamente para aprendizaje y uso. Para total certeza, añada un enlace a la fuente en los comentarios de su CSS.

¿Necesito incluir ambos archivos CSS?

No. Si solo necesita un estilo de botón, copie las reglas CSS correspondientes en la hoja de estilos principal de su tema. component.css y default.css están separados para facilitar la navegación por la demostración, no por necesidad técnica.

¿Cómo cambio el color del botón para que coincida con mi marca?

Encuentre el selector del estilo que necesita en default.css (por ejemplo, .btn-6d) y reemplace los valores de color y border-color. Para estilos con degradado (btn-8), reemplace los colores en background-image: linear-gradient(). Sobrescriba en un tema hijo o en el personalizador de WordPress (la sección "CSS adicional").

¿Funcionan los botones en dispositivos móviles?

Sí, todos los efectos se basan en :hover y transition, que los navegadores móviles manejan correctamente. Tenga en cuenta que las pantallas táctiles no tienen un estado hover como tal: el navegador aplica los estilos hover en el primer toque, y la acción se activa en el segundo. Para botones de llamada a la acción críticos, use estilos que se vean bien incluso sin el efecto hover.

Vale la pena usar CreativeButtons en 2026

CreativeButtons es un caso raro en el que el código de 2013 sigue siendo funcional y útil. Las especificaciones CSS en las que se basa (transition, transform y pseudoelementos) se han convertido en estándar hace tiempo y son compatibles con todos los navegadores.

Use este conjunto si necesita: creación rápida de prototipos sin frameworks, una base de código clara para enseñar a desarrolladores junior, o estilos ya preparados para un proyecto personal que no requiera un sistema de diseño de nivel empresarial. Para un gran proyecto comercial, tiene más sentido elegir una colección moderna con variables CSS y soporte de accesibilidad integrado.

Descargue CreativeButtons desde GitHub y pruebe cualquiera de las ocho categorías en su proyecto, desde el prototipo hasta la producción.