button_simple (_buttons.scss)

Tipo: Mixin

Versión: 2.x.x

Crea un botón básico y restablece sus estilos iniciales antes de aplicar dimensiones, estilos de texto, colores y borde. El contenido queda centrado mediante flexbox y no puede seleccionarse.

La clave tf recibe un mapa propio con la misma sintaxis del mixin tf; sus opciones no se declaran directamente en button_simple. Los estados :hover, .active y :disabled aceptan fondo, color de texto y borde propios, y time controla la duración de la transición.

Cuando se utiliza aspect_ratio, también debe enviarse width. En ese caso, button_simple anula height y delega la resolución en resolve-size mediante la combinación width + aspect_ratio. Si no se envía una proporción, utiliza width + height.

Interface 

@mixin button_simple($attr: (
    width: 150px,
    height: 47px,
    aspect_ratio: null,
    bg: #FFF,
    bg_hover: #000,
    bg_active: #000,
    bg_disabled: color.adjust(#000, $lightness: 70%),
    color: #000,
    color_hover: #FFF,
    color_active: #FFF,
    color_disabled: color.adjust(#000, $lightness: 40%),
    border_radius: 0px,
    border: 1px solid #000,
    border_hover: 1px solid #000,
    border_active: 1px solid #000,
    border_disabled: 1px solid color.adjust(#000, $lightness: 70%),
    padding: 10px,
    time: 500ms,
    tf: (),
    reset: true,
    cursor: pointer,
    cursor_disabled: not-allowed
));

Sintaxis map

Clave Tipo Default Descripción
width | wMedida150pxDefine el ancho del botón.
height | hMedida47pxDefine el alto del botón cuando no se utiliza aspect_ratio.
aspect_ratio | ratio | arNumbernullDefine la relación de aspecto; requiere width y reemplaza height.
padding | pMedida10pxDefine el espacio interior del botón.
bgColor#FFFDefine el fondo del estado normal.
bg_hover | bghColor#000Define el fondo de :hover.
bg_active | bgaColor#000Define el fondo de .active.
bg_disabled | bgdColorcolor.adjust(#000, $lightness: 70%)Define el fondo de :disabled y .disabled.
color | cColor#000Define el color del texto en el estado normal.
color_hover | chColor#FFFDefine el color del texto en :hover.
color_active | caColor#FFFDefine el color del texto en .active.
color_disabled | cdColorcolor.adjust(#000, $lightness: 40%)Define el color del texto en :disabled y .disabled.
border_radius | radiusMedida0pxDefine el radio de borde del botón.
border | bdString1px solid #000Define el borde del estado normal.
border_hover | bdhString1px solid #000Define el borde de :hover.
border_active | bdaString1px solid #000Define el borde de .active.
border_disabled | bddString1px solid color.adjust(#000, $lightness: 70%)Define el borde de :disabled y .disabled.
time | tTiempo500msDefine la duración de la transición.
tfMap()Configura texto y tipografía con las claves y los alias admitidos por el mixin tf.
reset | rBooleantrueActiva el restablecimiento inicial con all: initial.
cursor | curStringpointerDefine el cursor del estado normal.
cursor_disabled | curdStringnot-allowedDefine el cursor de :disabled y .disabled.

Ejemplo

Este ejemplo compara el resultado por defecto del mixin con una variante configurada mediante map. También muestra el mismo patrón aplicado sobre enlaces con etiqueta a. En cada grupo se muestran los estados normal, .active y deshabilitado para verificar cómo cambian los colores, bordes, dimensiones y estilos de texto.

Sin parámetros

Con parámetros

Con etiqueta a

Continuar Activo No disponible 

            

            

                

            

            

                
<div class="button_simple_example_group">
    <h3 class="subtitle">Sin parámetros</h3>
    <button class="button_simple_example_no_params">Continuar</button>
    <button class="button_simple_example_no_params active">Activo</button>
    <button class="button_simple_example_no_params" disabled>No disponible</button>
</div>

<div class="button_simple_example_group">
    <h3 class="subtitle">Con parámetros</h3>
    <button class="button_simple_example">Continuar</button>
    <button class="button_simple_example active">Activo</button>
    <button class="button_simple_example" disabled>No disponible</button>
</div>

<div class="button_simple_example_group">
    <h3 class="subtitle">Con etiqueta a</h3>
    <a class="button_simple_example" href="#">Continuar</a>
    <a class="button_simple_example active" href="#">Activo</a>
    <a class="button_simple_example disabled" href="#" aria-disabled="true">No disponible</a>
</div>

            

        

        

            Constructor interactivo
        

        

            Modifica los parámetros públicos de button_simple y consulta el resultado, el SCSS y el HTML de la
            configuración actual. La vista previa permite revisar los estados que admite el mixin.
        

        

            

                

                    El constructor interactivo necesita JavaScript. Puedes consultar el ejemplo estático anterior para
                    revisar el comportamiento de button_simple.