This colourful effect is great for catching the attention of your visitors.
It slowly cycles through a series of colours. You can change the colours that appear, and it’s best to use discretion and perhaps 3 colours, rather than the full rainbow of colours that has been used for the example.
1. Add the class “colour-animation” to your button.
/*--Colour animation on button--*/
<a href="#" class="button colour-animation">Animated button</a>
2. Add this code to your My Custom CSS. You can change the colour names.
/*--Colour animation--*/
@keyframes blink {
0% {background: violet;}
14.3% {background: indigo;}
28.6% {background: blue;}
42.9% {background: green;}
57.2% {background: yellow;}
71.5% {background: orange;}
85.8% {background: red;}
100% {background: violet;}
}
@-webkit-keyframes blink {
0% {background: violet;}
14.3% {background: indigo;}
28.6% {background: blue;}
42.9% {background: green;}
57.2% {background: yellow;}
71.5% {background: orange;}
85.8% {background: red;}
100% {background: violet;}
}
.entry-content a.colour-animation {color: #fff; border: 1px solid black;animation: blink 20s linear infinite; -webkit-animation: blink 20s linear infinite;}