a.btn-1,
a.btn-2 { text-decoration: none; border: 2px solid #1E50AE; padding: 10px 30px; color: #000; text-transform: uppercase; letter-spacing: 2px; position: relative; display: inline-block; }

    a.btn-1 span, a.btn-2 span { position: relative; z-index: 3; color: #fff; }

    /* Button 1 styles */
    a.btn-1::before { content: ""; position: absolute; top: 5px; left: -2px; width: calc(100% + 6px); height: calc(100% - 10px); background-color: #ffffff; transition: all 0.5s ease-in-out; transform: scaleY(1); }

    a.btn-1:hover::before,
    a.btn-2:hover::before { transform: scaleY(0); }

    a.btn-1::after { content: ""; position: absolute; left: 5px; top: -5px; width: calc(100% - 10px); height: calc(100% + 10px); background-color: #ffffff; transition: all 0.5s ease-in-out; transform: scaleX(1); }
    a.btn-1:hover::after,
    a.btn-2:hover::after { transform: scaleX(0); }

/* Button 2 styles */
a.btn-2 { color: #ffffff; transition: all 0.5s ease-in-out; }
    a.btn-2:hover span { color: #1E50AE; transition: all 0.5s ease-in-out; }
    a.btn-2::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #1E50AE; transition: all 0.5s ease-in-out; transform: scaleY(1); }
    a.btn-2::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #1E50AE; transition: all 0.5s ease-in-out; transform: scaleX(1); }