<style>

    .btn-list {
        margin: 0px 0;
        padding: 1px 1px;
        position: relative;
        list-style-type: none;
    }

    .btn-list.normal:after {
        content: 'Normal'
    }

    .btn-list.rounded:after {
        content: 'Rounded'
    }

    .btn-list:after {
        width: 90%;
        height: 48px;
        font: bold 18px/2.6 Roboto, sans-serif;
        text-align: center;
        position: absolute;
        top: -48px;
        left: 5%;
        z-index: -1;
        border-radius: 3px 3px 0 0
    }

    .btn-list li:not(.title) {
        float: left;
        list-style-type: none;
    }

    .btn-gradient {
        width: 36px;
        height: 36px;
        text-align: center;
        line-height: 2.2;
        display: block;
        margin: 10px;
        border-radius: 2px;
        -webkit-transition: all 300ms;
        transition: all 300ms
    }

    .btn-gradient.rounded {
        border-radius: 50% !important;
    }

    .btn-gradient i {
        font-size: 18px;
        line-height: 1;
        vertical-align: middle
    }

    #light, #dark {
        margin: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }


    #light .btn-gradient {
        color: rgba(0, 0, 0, 0.54);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.54)
    }

    #light .btn-gradient:hover {
        color: #FFF
    }

    #dark .btn-gradient {
        color: rgba(255, 255, 255, 0.54);
        box-shadow: 0 0 1px rgba(255, 255, 255, 0.54)
    }

    #dark .btn-gradient:hover {
        color: #FFF
    }

    #dark .btn-list:after {
        color: rgba(255, 255, 255, 0.54);
        background: #000;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.10)
    }

    #dark .btn-list {
        background: #212121;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.10)
    }

    @-webkit-keyframes Gradient {
        0% {
            background-position: 0 50%
        }

        50% {
            background-position: 100% 50%
        }

        100% {
            background-position: 0 50%
        }
    }

    @keyframes Gradient {
        0% {
            background-position: 0 50%
        }

        50% {
            background-position: 100% 50%
        }

        100% {
            background-position: 0 50%
        }
    }

    #light .btn-gradient.facebook:hover {
        box-shadow: 0 5px 8px rgba(26, 35, 126, 0.25);
        background: #3949AB;
        background: -webkit-linear-gradient(left, #3949AB 0%, #2196F3 100%);
        background: linear-gradient(to right, #3949AB 0%, #2196F3 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3949AB', endColorstr='#2196F3', GradientType=1);
        background-size: 400%;
        -webkit-animation: Gradient 1s ease infinite;
        animation: Gradient 1s ease infinite
    }

    #light .btn-gradient.twitter:hover {
        box-shadow: 0 5px 8px rgba(33, 150, 243, 0.25);
        background: #00BCD4;
        background: -webkit-linear-gradient(left, #00BCD4 0%, #2196F3 100%);
        background: linear-gradient(to right, #00BCD4 0%, #2196F3 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BCD4', endColorstr='#2196F3', GradientType=1);
        background-size: 400%;
        -webkit-animation: Gradient 1s ease infinite;
        animation: Gradient 1s ease infinite
    }

    #light .btn-gradient.google:hover {
        box-shadow: 0 5px 8px rgba(244, 67, 54, 0.25);
        background: #F44336;
        background: -webkit-linear-gradient(left, #F44336 0%, #FF1744 100%);
        background: linear-gradient(to right, #F44336 0%, #FF1744 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F44336', endColorstr='#FF1744', GradientType=1);
        background-size: 400%;
        -webkit-animation: Gradient 1s ease infinite;
        animation: Gradient 1s ease infinite
    }

    #light .btn-gradient.instagram:hover {
        box-shadow: 0 5px 8px rgba(63, 81, 181, 0.25);
        background: #FFC107;
        background: -webkit-linear-gradient(left, #FFC107 0%, #F50057 50%, #3F51B5 100%);
        background: linear-gradient(to right, #FFC107 0%, #F50057 50%, #3F51B5 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFC107', endColorstr='#3F51B5', GradientType=1);
        background-size: 400%;
        -webkit-animation: Gradient 5s ease infinite;
        animation: Gradient 5s ease infinite
    }

    #light .btn-gradient.linkedin:hover {
        box-shadow: 0 5px 8px rgba(3, 169, 244, 0.25);
        background: #0288D1;
        background: -webkit-linear-gradient(left, #0288D1 0%, #2196F3 100%);
        background: linear-gradient(to right, #0288D1 0%, #2196F3 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0288D1', endColorstr='#2196F3', GradientType=1);
        background-size: 400%;
        -webkit-animation: Gradient 1s ease infinite;
        animation: Gradient 1s ease infinite
    }

    #light .btn-gradient.github:hover {
        color: rgba(33, 33, 33, 1);
        box-shadow: 0 5px 8px rgba(0, 0, 0, 0.25);
        background: #ECEFF1;
        background: -webkit-linear-gradient(left, #ECEFF1 0%, #B0BEC5 100%);
        background: linear-gradient(to right, #ECEFF1 0%, #B0BEC5 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ECEFF1', endColorstr='#B0BEC5', GradientType=1);
        background-size: 400%;
        -webkit-animation: Gradient 1s ease infinite;
        animation: Gradient 1s ease infinite
    }

    #light .btn-gradient.codepen:hover {
        box-shadow: 0 5px 8px rgba(0, 0, 0, 0.25);
        background: #000;
        background: -webkit-linear-gradient(left, #000 0%, #212121 100%);
        background: linear-gradient(to right, #000 0%, #212121 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#212121', GradientType=1);
        background-size: 400%;
        -webkit-animation: Gradient 1s ease infinite;
        animation: Gradient 1s ease infinite
    }

    #light .btn-gradient.gmail:hover {
        box-shadow: 0 5px 8px rgba(244, 67, 54, 0.25);
        background: #D50000;
        background: -webkit-linear-gradient(left, #D50000 0%, #FF1744 100%);
        background: linear-gradient(to right, #D50000 0%, #FF1744 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D50000', endColorstr='#FF1744', GradientType=1);
        background-size: 400%;
        -webkit-animation: Gradient 1s ease infinite;
        animation: Gradient 1s ease infinite
    }

    #light .btn-gradient.skype:hover {
        box-shadow: 0 5px 8px rgba(3, 169, 244, 0.25);
        background: #030000;
        background: #039BE5;
        background: -webkit-linear-gradient(left, #039BE5 0%, #29B6F6 100%);
        background: linear-gradient(to right, #039BE5 0%, #29B6F6 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#039BE5', endColorstr='#29B6F6', GradientType=1);
        background-size: 400%;
        -webkit-animation: Gradient 1s ease infinite;
        animation: Gradient 1s ease infinite
    }

    #dark .btn-gradient.facebook:hover {
        box-shadow: 0 5px 8px rgba(26, 35, 126, 0.50);
        background: #3949AB;
        background: -webkit-linear-gradient(left, #3949AB 0%, #2196F3 100%);
        background: linear-gradient(to right, #3949AB 0%, #2196F3 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3949AB', endColorstr='#2196F3', GradientType=1);
        background-size: 400%;
        -webkit-animation: Gradient 1s ease infinite;
        animation: Gradient 1s ease infinite
    }

    #dark .btn-gradient.twitter:hover {
        box-shadow: 0 5px 8px rgba(33, 150, 243, 0.50);
        background: #00BCD4;
        background: -webkit-linear-gradient(left, #00BCD4 0%, #2196F3 100%);
        background: linear-gradient(to right, #00BCD4 0%, #2196F3 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00BCD4', endColorstr='#2196F3', GradientType=1);
        background-size: 400%;
        -webkit-animation: Gradient 1s ease infinite;
        animation: Gradient 1s ease infinite
    }

    #dark .btn-gradient.google:hover {
        box-shadow: 0 5px 8px rgba(244, 67, 54, 0.50);
        background: #F44336;
        background: -webkit-linear-gradient(left, #F44336 0%, #FF1744 100%);
        background: linear-gradient(to right, #F44336 0%, #FF1744 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F44336', endColorstr='#FF1744', GradientType=1);
        background-size: 400%;
        -webkit-animation: Gradient 1s ease infinite;
        animation: Gradient 1s ease infinite
    }

    #dark .btn-gradient.instagram:hover {
        box-shadow: 0 5px 8px rgba(63, 81, 181, 0.50);
        background: #FFC107;
        background: -webkit-linear-gradient(left, #FFC107 0%, #F50057 50%, #3F51B5 100%);
        background: linear-gradient(to right, #FFC107 0%, #F50057 50%, #3F51B5 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFC107', endColorstr='#3F51B5', GradientType=1);
        background-size: 400%;
        -webkit-animation: Gradient 5s ease infinite;
        animation: Gradient 5s ease infinite
    }

    #dark .btn-gradient.linkedin:hover {
        box-shadow: 0 5px 8px rgba(3, 169, 244, 0.50);
        background: #0288D1;
        background: -webkit-linear-gradient(left, #0288D1 0%, #2196F3 100%);
        background: linear-gradient(to right, #0288D1 0%, #2196F3 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0288D1', endColorstr='#2196F3', GradientType=1);
        background-size: 400%;
        -webkit-animation: Gradient 1s ease infinite;
        animation: Gradient 1s ease infinite
    }

    #dark .btn-gradient.github:hover {
        color: rgba(33, 33, 33, 1);
        box-shadow: 0 5px 8px rgba(0, 0, 0, 0.50);
        background: #ECEFF1;
        background: -webkit-linear-gradient(left, #ECEFF1 0%, #B0BEC5 100%);
        background: linear-gradient(to right, #ECEFF1 0%, #B0BEC5 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ECEFF1', endColorstr='#B0BEC5', GradientType=1);
        background-size: 400%;
        -webkit-animation: Gradient 1s ease infinite;
        animation: Gradient 1s ease infinite
    }

    #dark .btn-gradient.codepen:hover {
        box-shadow: 0 5px 8px rgba(0, 0, 0, 0.50);
        background: #000;
        background: -webkit-linear-gradient(left, #000 0%, #212121 100%);
        background: linear-gradient(to right, #000 0%, #212121 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#212121', GradientType=1);
        background-size: 400%;
        -webkit-animation: Gradient 1s ease infinite;
        animation: Gradient 1s ease infinite
    }

    #dark .btn-gradient.gmail:hover {
        box-shadow: 0 5px 8px rgba(244, 67, 54, 0.50);
        background: #D50000;
        background: -webkit-linear-gradient(left, #D50000 0%, #FF1744 100%);
        background: linear-gradient(to right, #D50000 0%, #FF1744 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D50000', endColorstr='#FF1744', GradientType=1);
        background-size: 400%;
        -webkit-animation: Gradient 1s ease infinite;
        animation: Gradient 1s ease infinite
    }

    #dark .btn-gradient.skype:hover {
        box-shadow: 0 5px 8px rgba(3, 169, 244, 0.50);
        background: #030000;
        background: #039BE5;
        background: -webkit-linear-gradient(left, #039BE5 0%, #29B6F6 100%);
        background: linear-gradient(to right, #039BE5 0%, #29B6F6 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#039BE5', endColorstr='#29B6F6', GradientType=1);
        background-size: 400%;
        -webkit-animation: Gradient 1s ease infinite;
        animation: Gradient 1s ease infinite
    }
</style>
