animácia farby pozadia z ľava do prava/ buttons

Animacia

.color-select{
	padding: 1px 5px;
	border-radius: 10px;
	display: inline-block;
        text-align: center;
        color: white;
        background: rgb(224, 52, 66);
	background: linear-gradient(to left, transparent 50%, rgb(224, 52, 66) 50%) right;
	background-size: 200% 100%;
	transition: .5s ease-out;

	animation-name: fill-collor; // meno animcacie
	animation-duration: 5s; // dlzka
	animation-timing-function: ease-in-out; // sposob casovania
        animation-iteration-count: 1;  // opakovania
        animation-delay: 3s; // oneskorenie
        animation-fill-mode: forwards;  // animacia ostane ako skoncila
}

@keyframes fill-collor {
  0% {background-position: right; transform: scale(1)}
  20% {background-position: left;}
  50% {background-position: left;}
  60% {background-position: right;}
  70% {background-position: right; transform: scale(1); font-weight: normal; }
  100% {background-position: left; transform: scale(1.1); font-weight: bold; }
}

Javascript toggle

document.querySelector('.color-select').classList.toggle("color-fill")

Buttons

background color animation left to right

.color-select{

        display: inline-block;
	background: linear-gradient(to left, transparent 50%, red 50%) right;
	background-size: 200% 100%;
	transition: .5s ease-out;

	padding: 1px 5px;
	border-radius: 10px;
        text-align: center;
        color: white;
        background: red;
}
.color-select:hover{
	background-position: left;
}

https://jsfiddle.net/75Umu/3/

https://codepen.io/kay8/pen/azKbjN

efekt odlesku:
https://codepen.io/iheartkode/pen/jqKpQV/

hotove styly buttonov

https://tympanus.net/Development/CreativeButtons/