﻿ 

.etilerbutton {
    --p: 0;
    --q: calc(1 - var(--p));
    overflow: hidden;
    position: relative;
    z-index: 1;
    width: 10em;
    background: #fff;
    color: #000;
    font: 800 1.115em/ 3 poppinsbold, sans-serif;
    text-align: center;
    text-decoration: none;
    text-transform: lowercase;
}

    .etilerbutton:before, .etilerbutton:after {
        --i: var(--p);
        --j: calc(1 - var(--i));
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: calc(var(--j)*(100% - sqrt(pow(10em, 2)pow(3, 2))));
        width: sqrt(pow(10em, 2)pow(3, 2));
        transform-origin: calc(var(--j)*100%) calc(var(--i)*100%);
        transform: rotate(atan(0.3)*-180deg/pi()) translate(calc(var(--q)*(1 - 2*var(--i))*-100%));
        box-shadow: 0 0 0 1px currentcolor;
        background: currentcolor;
        color: #b7b7b7;
        transition: transform 0.5s ease-in-out;
        content: '';
    }

    .etilerbutton:after {
        --i: var(--q);
    }

    .etilerbutton:hover, .a:focus {
        --p: 1;
    }
