Snipr Code Grid:
{"settings":{"resources":[],"title":"CSS - Animated Linear gradient"},"code":{"html":"%3Ca%20href%3D%22%23%22%20class%3D%22button%22%3E%0A%09%3Cspan%3EWP%20Snipr%3C%2Fspan%3E%0A%3C%2Fa%3E","js":"","css":".button%20%7B%0A%20%20%09font-family%3A%20'Lucida%20Grande'%2C%20Sans-Serif%3B%0A%09text-decoration%3Anone%3B%0A%20%20%09margin%3A50px%20auto%3B%0A%20%20%20%20padding%3A%200%3B%0A%20%20%20%20width%3A%20300px%3B%0A%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20background-image%3A%20linear-gradient(150deg%2C%2360D577%2C%23ffe479%2C%23c589ff%2C%236ad5ff%2C%2360d57e)%3B%0A%20%20%20%20border-radius%3A%206px%3B%0A%20%20%20%20box-sizing%3A%20border-box%3B%0A%20%20%09color%3A%23FFF%3B%0A%20%20%20%20display%3A%20block%3B%0A%20%20%09font-weight%3A%20bold%3B%0A%20%20%20%20text-overflow%3A%20ellipsis%3B%0A%20%20%20%20font-size%3A%2018px%3B%0A%20%20%20%20white-space%3A%20nowrap%3B%0A%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20-webkit-transition%3A%20.2s%20ease%3B%0A%20%20%20%20transition%3A%20.2s%20ease%3B%0A%20%20%20%20cursor%3A%20pointer%3B%0A%7D%0A.button%3Ahover%20%7B%0A%20%20%20%20-webkit-animation%3A%20rainbow-border%20.5s%20linear%20infinite%3B%0A%20%20%20%20animation%3A%20rainbow-border%20.5s%20linear%20infinite%3B%0A%7D%0A.button%20span%20%7B%0A%20%20%20%20padding%3A%2020px%200%3B%0A%20%20%20%20font-size%3A%2018px%3B%0A%20%20%20%20background%3A%20%232f4958%3B%0A%20%20%20%20border-radius%3A%203px%3B%0A%20%20%20%20display%3A%20block%3B%0A%20%20%20%20margin%3A8px%3B%0A%20%20%20%20box-sizing%3A%20border-box%3B%0A%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20-webkit-transition%3A%20background%20.5s%20ease%3B%0A%20%20%20%20transition%3A%20background%20.5s%20ease%3B%0A%7D%0A%0A%40-webkit-keyframes%20rainbow-border%7B0%25%2Cto%7Bbackground-image%3Alinear-gradient(-150deg%2C%2360D577%2C%23ffe479%2C%23c589ff%2C%236ad5ff)%7D25%25%7Bbackground-image%3Alinear-gradient(-150deg%2C%23ffe479%2C%23c589ff%2C%236ad5ff%2C%2360D577)%7D50%25%7Bbackground-image%3Alinear-gradient(-150deg%2C%23c589ff%2C%236ad5ff%2C%2360D577%2C%23ffe479)%7D75%25%7Bbackground-image%3Alinear-gradient(-150deg%2C%236ad5ff%2C%2360D577%2C%23ffe479%2C%23c589ff)%7D%7D%0A%40keyframes%20rainbow-border%7B0%25%2Cto%7Bbackground-image%3Alinear-gradient(-150deg%2C%2360D577%2C%23ffe479%2C%23c589ff%2C%236ad5ff)%7D25%25%7Bbackground-image%3Alinear-gradient(-150deg%2C%23ffe479%2C%23c589ff%2C%236ad5ff%2C%2360D577)%7D50%25%7Bbackground-image%3Alinear-gradient(-150deg%2C%23c589ff%2C%236ad5ff%2C%2360D577%2C%23ffe479)%7D75%25%7Bbackground-image%3Alinear-gradient(-150deg%2C%236ad5ff%2C%2360D577%2C%23ffe479%2C%23c589ff)%7D%7D"}}
<a href="#" class="button">
	<span>WP Snipr</span>
</a>
 
.button {
  	font-family: 'Lucida Grande', Sans-Serif;
	text-decoration:none;
  	margin:50px auto;
    padding: 0;
    width: 300px;
    text-align: center;
    position: relative;
    background-image: linear-gradient(150deg,#60D577,#ffe479,#c589ff,#6ad5ff,#60d57e);
    border-radius: 6px;
    box-sizing: border-box;
  	color:#FFF;
    display: block;
  	font-weight: bold;
    text-overflow: ellipsis;
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    -webkit-transition: .2s ease;
    transition: .2s ease;
    cursor: pointer;
}
.button:hover {
    -webkit-animation: rainbow-border .5s linear infinite;
    animation: rainbow-border .5s linear infinite;
}
.button span {
    padding: 20px 0;
    font-size: 18px;
    background: #2f4958;
    border-radius: 3px;
    display: block;
    margin:8px;
    box-sizing: border-box;
    height: 100%;
    -webkit-transition: background .5s ease;
    transition: background .5s ease;
}

@-webkit-keyframes rainbow-border{0%,to{background-image:linear-gradient(-150deg,#60D577,#ffe479,#c589ff,#6ad5ff)}25%{background-image:linear-gradient(-150deg,#ffe479,#c589ff,#6ad5ff,#60D577)}50%{background-image:linear-gradient(-150deg,#c589ff,#6ad5ff,#60D577,#ffe479)}75%{background-image:linear-gradient(-150deg,#6ad5ff,#60D577,#ffe479,#c589ff)}}
@keyframes rainbow-border{0%,to{background-image:linear-gradient(-150deg,#60D577,#ffe479,#c589ff,#6ad5ff)}25%{background-image:linear-gradient(-150deg,#ffe479,#c589ff,#6ad5ff,#60D577)}50%{background-image:linear-gradient(-150deg,#c589ff,#6ad5ff,#60D577,#ffe479)}75%{background-image:linear-gradient(-150deg,#6ad5ff,#60D577,#ffe479,#c589ff)}}