@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);

body {
    font-family: "Open Sans", sans-serif;
    background: #fff;
    margin: 0;
    padding: 0;
}

.wrap {
    height: 50vh;
    position: relative;
}

    .wrap:nth-of-type(2n) {
        background: #fcfcfc;
    }

    .wrap a {
        display: block;
        margin: 1em auto;
        width: 200px;
        text-align: center;
    }
    

.btn-l-r::after {
    height: 100%;
    width: 0;
    top: 0;
}

.btn-l-r:hover::after {
    width: 100%;
}

.btn-l-r::after {
    left: 0;
}

/* from Liam Sheppard pen */
/* https://codepen.io/liamsheppard/pen/NGVQOE */
/* ------ another one ------ */
/* ------ this one uses an bg image ------ */
.btnFillUp {
    display: inline-block;
    padding: 15px;
    overflow: hidden;
    color: #212529;
    text-decoration: none;
    border: 1px solid #212529;
    /*  border-radius: 25px;*/
    background-position: 0 -100%;
    background-repeat: repeat-x;
    transition: background-position 0.8s ease;
    background-color: #282828
}

    .btnFillUp:hover {
        background-position: 100% 50%;
        border-color: #363640;
        color: #fcfcfc;
    }

.liquidBg {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAxIiBoZWlnaHQ9IjEzNyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNDEuMiAoMzUzOTcpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogPHRpdGxlPlBhdGggMjwvdGl0bGU+CiA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KCiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPGcgZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsPSJub25lIiBpZD0iUGFnZS0xIj4KICAgPHBhdGggZmlsbD0iIzM5Mzk0NSIgaWQ9IlBhdGgtMiIgZD0ibTAuNTAxOTUsNy45NjI4OWwwLDEyNy4zMzUxM2wyOTkuODU5NzEsMGwwLC0xMjkuMDg1NTZjMCwwIC05LjkxMDQ5LDQuODU1OSAtMjIuMTc2MTEsNC44NTU5Yy0xMi4yNjU2MywwIC0zMS4xNTIzNSwtMTEuOTYwOTQgLTc4LjM3MzA1LC0xMS45NjA5NGMtNDcuMjIwNywwIC03Mi4xNDA2Miw5LjM5ODQ0IC05OC4zODA4Niw5LjM5ODQ0Yy0yNi4yNDAyMywwIC00Ni4yNzE0OCwtOC41NTA3OCAtNTkuODAwNzgsLTguNTUwNzhjLTEzLjUyOTMsMCAtNDEuMTI4OTEsOC4wMDc4MSAtNDEuMTI4OTEsOC4wMDc4MXoiLz4KICA8L2c+CiA8L2c+Cjwvc3ZnPg==");
}

.anglebg {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjMwMHB4IiBoZWlnaHQ9IjEzMHB4IiB2aWV3Qm94PSIwIDAgMzAwIDEzMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNDEuMiAoMzUzOTcpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPlBhdGggMiBDb3B5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBvbHlnb24gaWQ9IlBhdGgtMi1Db3B5IiBmaWxsPSIjRkMyOTk1IiBwb2ludHM9IjAgMzIuODU1NDY4NyAwIDEyOS4xOTA1OTkgMjk5Ljg1OTcwNyAxMjkuMTkwNTk5IDI5OS44NTk3MDcgMC4xMDUwNDA3OTEiPjwvcG9seWdvbj4KICAgIDwvZz4KPC9zdmc+");
}

/* courtesy of */
/* https://codepen.io/stenno/ */