Cara Membuat Button Gradient Background Animation

Seribu Ilmu    June 27, 2018    BLOGSPOT   

Hari ini sayat ingin memperkenalkan Cara Membuat Button Gradient Background Animation.

copy paste code di bawah ini di mana pun yang kalian inginkan, disini saya meperaktekan dengan button di post halaman.

<!--Code Button Color-->
.button {
    border: none;
    color: white;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    width: 50 px;
    hight : 5 px;
}

.button {
    color: #black;
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;
}

.button:hover {
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    color: white;
border-radius: 10px;
}

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

@-moz-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%
    }
}



.button{border-radius: 10px;}

</style>

Letakkan code button di mana saja dengan memanggil

<a href="https://catatanharianmiko.blogspot.com/"><button class="button button">DEMO</button></a>

Ganti Url "https://catatanharianmiko.blogspot.com/" dengan Url anda ...