/* animated transitions */
.trans-right {
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: perspective(1px) translateZ(0);
    transition-property: color;
    transition-duration: 0.3s;
    vertical-align: middle;
}

    .trans-right:before {
        border-radius: 6pt;
        bottom: 0;
        content: '';
        top: 0;
        left: 0;
        right: 0;
        position: absolute;
        transform: scaleX(0);
        transform-origin: 0 50%;
        transition-property: transform;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
        z-index: -1;
    }

    .trans-right:hover, .trans-right:focus, .trans-right:active {
        color: white;
    }

        .trans-right:hover:before, .trans-right:focus:before, .trans-right:active:before {
            transform: scaleX(1);
        }

.trans-left {
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: perspective(1px) translateZ(0);
    transition-property: color;
    transition-duration: 0.3s;
    vertical-align: middle;
}

    .trans-left:before {
        border-radius: 6pt;
        bottom: 0;
        content: '';
        top: 0;
        left: 0;
        right: 0;
        position: absolute;
        transform: scaleX(0);
        transform-origin: 100% 50%;
        transition-property: transform;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
        z-index: -1;
    }

    .trans-left:hover, .trans-left:focus, .trans-left:active {
        color: white;
    }

        .trans-left:hover:before, .trans-left:focus:before, .trans-left:active:before {
            transform: scaleX(1);
        }

.trans-center {
    display: inline-block;
    vertical-align: middle;
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden;
    transition-property: color;
    transition-duration: 0.3s;
}

    .trans-center:before {
        content: '';
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 100%;
        transform: scale(0);
        transition-property: transform;
        transition-duration: 0.3s;
        transition-timing-function: ease-out;
    }

    .trans-center:hover, .trans-center:focus, .trans-center:active {
        color: white;
    }

        .trans-center:hover:before, .trans-center:focus:before, .trans-center:active:before {
            transform: scale(2);
        }