.anak {
    --b: 3px;   /* border thickness */
    --s: .15em; /* size of the corner */
    --c: #1b6dfae3;
    --h: #012970;

    padding: calc(.05em + var(--s)) calc(.3em + var(--s));
    color: var(--c);
    --_p: var(--s);
    background:
        conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--h) 0)
        var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
    transition: .3s linear, color 0s, background-color 0s;
    outline: var(--b) solid #0000;
    outline-offset: .2em;
}
.anak:hover,
.anak:focus-visible{
    --_p: 0px;
    outline-color: var(--h);
    outline-offset: .2em;
    color: var(--h);
}
.anak:active {
    background: var(--c);
    color: #fff;
}

.anak {
    font-family: system-ui, sans-serif;
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer;
    border: none;
    margin: .3em;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
}

@media (max-width: 786px) {
    .anak {
        max-width: 100%;
        display: inline-block;
        font-size: 1.3rem;
    }
}