JSFiddle - React, Tailwind, and code Playground

by Edgar KAMDEM

HTML

<h1>CSS Border Transitions</h1>
<button class="draw">draw</button>

CSS

button {
            background: none;
            border: 0;
            box-sizing: border-box;
            box-shadow: inset 0 0 0 2px #f45e61;
            color: #f45e61;
            font-size: inherit;
            font-weight: 700;
            margin: 1em;
            padding: 1em 2em;
            text-align: center;
            text-transform: capitalize;
            position: relative;
            vertical-align: middle;
        }
        button::before, button::after {
            box-sizing: border-box;
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .draw {
            -webkit-transition: color 0.25s;
            transition: color 0.25s;
        }
        .draw::before, .draw::after {
            border: 2px solid transparent;
            width: 0;
            height: 0;
        }
        .draw::before {
            top: 0;
            left: 0;
        }
        .draw::after {
            bottom: 0;
            right: 0;
        }
       /* .draw:hover {
            color: #60daaa;
        }*/
        .draw:hover::before, .draw:hover::after {
            width: 100%;
            height: 100%;
        }
        .draw:hover::before {
            border-top-color: #60daaa;
            border-right-color: #60daaa;
            -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
            transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
        }
        .draw:hover::after {
            border-bottom-color: #60daaa;
            border-left-color: #60daaa;
            -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
            transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
        }