button_bisel (_buttons.scss)

Tipo: Mixin

Versión: 2.x.x

Crea un botón con apariencia biselada mediante dos gradientes opuestos: uno en el contenedor y otro en el pseudoelemento interior. El gradiente interno cambia de dirección durante :hover.

El botón debe contener un elemento .content_link, que se centra sobre el pseudoelemento y recibe la tipografía y los colores del contenido.

Interface 

@mixin button_bisel($attr: (
    width: 150px,
    height: 47px,
    diff: 10px,
    bg1: #FFF,
    bg2: #000,
    bg_opacity: 0.4,
    border_contain: false,
    border: 1px solid #000,
    cursor: pointer,
    aspect_inside: 3.7,
    tf: (),
    opacity_before: 1,
    color: #000,
    color_hover: #FFF
));

Sintaxis map

Clave Tipo Default Descripción
width | wMedida150pxDefine el ancho exterior del botón.
height | hMedida47pxDefine el alto exterior del botón.
diff | difMedida10pxReduce el ancho interior respecto al ancho exterior.
bg1Color#FFFDefine el primer color de los gradientes.
bg2Color#000Define el segundo color de los gradientes.
bg_opacity | bgoNumber0.4Define la opacidad de los colores de los gradientes.
border_contain | bdcBooleanfalseActiva el borde del contenedor exterior.
border | bdBorder1px solid #000Define el borde exterior cuando está habilitado.
cursor | curStringpointerDefine el cursor mostrado sobre el botón.
aspect_inside | inside | iNumber3.7Define la relación de aspecto del pseudoelemento interior.
tfMap()Configura la tipografía y el texto de .content_link mediante las claves y aliases admitidos por el mixin tf.
opacity_beforeNumber1Define la opacidad del pseudoelemento interior.
color | cColor#000Define el color normal de .content_link.
color_hover | chColor#FFFDefine el color de .content_link durante hover.

Ejemplo 


            

            

                

            

            

                
<div class="button_bisel_example_group">
    <button class="button_bisel_example">
        <span class="content_link">Explorar</span>
    </button>
    <button class="button_bisel_example button_bisel_example_border">
        <span class="content_link">Con borde</span>
    </button>
</div>

            

        

        

            Constructor interactivo
        

        

            Ajusta las dimensiones, los gradientes, el bisel interior, el borde y la tipografía de
            button_bisel. La vista previa permite fijar el estado Hover para comprobar la inversión del
            gradiente interior y el color del contenido.
        

        

            

                

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