﻿.perspectve-button {
    padding: 0;
    list-style-type: none;
    position: fixed;
    z-index: 1048;
    left: 40px;
    bottom: 40px;
    cursor: pointer;
}

    .perspectve-button li {
        box-sizing: border-box;
        width: 15em;
        height: 3em;
        font-size: 20px;
        border-radius: 0.5em;
        margin: 0.5em;
        box-shadow: 0 0 1em rgba(0,0,0,0.2);
        color: white;
        font-family: sans-serif;
        text-transform: capitalize;
        line-height: 3em;
        transition: 0.3s;
        cursor: pointer;
    }

        .perspectve-button li:nth-child(even) {
            background: linear-gradient(to right, orange, tomato);
            text-align: left;
            padding-left: 10%;
            transform: perspective(500px) rotateY(45deg);
        }

        .perspectve-button li:nth-child(odd) {
            background: linear-gradient(to left, red, #ea5b25);
            text-align: right;
            padding-right: 10%;
            transform: perspective(500px) rotateY(-45deg);
        }

        .perspectve-button li:nth-child(even):hover {
            transform: perspective(200px) rotateY(45deg);
            padding-left: 5%;
        }

        .perspectve-button li:nth-child(odd):hover {
            transform: perspective(200px) rotateY(-45deg);
            padding-right: 5%;
        }

.button-glowing {
    background-color: #004A7F;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: Arial;
    font-size: 20px;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    -webkit-animation: glowing 1500ms infinite;
    -moz-animation: glowing 1500ms infinite;
    -o-animation: glowing 1500ms infinite;
    animation: glowing 1500ms infinite;
}

@-webkit-keyframes glowing {
    0% {
        background-color: #B20000;
        -webkit-box-shadow: 0 0 3px #B20000;
    }

    50% {
        background-color: #FF0000;
        -webkit-box-shadow: 0 0 40px #FF0000;
    }

    100% {
        background-color: #B20000;
        -webkit-box-shadow: 0 0 3px #B20000;
    }
}

@-moz-keyframes glowing {
    0% {
        background-color: #B20000;
        -moz-box-shadow: 0 0 3px #B20000;
    }

    50% {
        background-color: #FF0000;
        -moz-box-shadow: 0 0 40px #FF0000;
    }

    100% {
        background-color: #B20000;
        -moz-box-shadow: 0 0 3px #B20000;
    }
}

@-o-keyframes glowing {
    0% {
        background-color: #B20000;
        box-shadow: 0 0 3px #B20000;
    }

    50% {
        background-color: #FF0000;
        box-shadow: 0 0 40px #FF0000;
    }

    100% {
        background-color: #B20000;
        box-shadow: 0 0 3px #B20000;
    }
}

@keyframes glowing {
    0% {
        background-color: #B20000;
        box-shadow: 0 0 3px #B20000;
    }

    50% {
        background-color: #FF0000;
        box-shadow: 0 0 40px #FF0000;
    }

    100% {
        background-color: #B20000;
        box-shadow: 0 0 3px #B20000;
    }
}