PURE CSS COLOR CYCLE

by wllai2001

HTML

<div style="width:100%">
<a class="sop_btn" style="font-size: 26px;text-decoration: none;
    font-weight: 800;color: #007547;" target="_blank" href="#">
<p class="sop_btn">
OOOOOOOO<span>OOOOOOOO</span>
</p>
</a>
</div>

CSS

@keyframes BorderColorPalette{
	0% {
		border: 3px solid #ff0000;               
	}
	50% {
		border: 3px solid #ff0000;                
	}
	
	100% {
		border: 3px solid #f6c83560;                
	}
}

@keyframes BackgroundColorPalette{
  from 
  { 
    margin-top: 50px;
    margin-bottom: 100px; 
    background: #000;
  }
  to   
  { 
    margin-top: 150px 
    margin-bottom: 50px;
    background: #fff;
  }
}
 
 p.sop_btn{ 
   padding: 15px 0;    
   border-radius: 5px;
   border: 3px solid red;
   text-align: center;
   animation-name: BorderColorPalette;
   animation-duration: 1.2s;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   animation-timing-function: linear; 
}

p.sop_btn:hover{
  background-color: #fecb18;
}

p.sop_btn span{
  text-decoration: underline;color: #0a7ccc;
}

a.sop_btn{ 
  display: list-item;
  border-radius: 5px;
  list-style: none;
  animation-name: BackgroundColorPalette;
  animation-duration: 1.2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear; 
}