button transition

1div {
2    font: 22px Arial;
3    display: inline-block;
4    padding: 1em 2em;
5    text-align: center;
6    color: white;
7    background: red; /* default color */
8
9    /* "to left" / "to right" - affects initial color */
10    background: linear-gradient(to left, salmon 50%, lightblue 50%) right;
11    background-size: 200%;
12    transition: .5s ease-out;
13}
14div:hover {
15    background-position: left;
16}

1/* Simple CSS color transition effect on selector */
2
3div {
4	color: white;
5  	background-color: black; 
6}
7
8div:hover {
9	background-color: red;
10}
11
12
13/* Additional transition effects on selector */
14
15div {
16	background-color: black;
17  	color: white;
18  	height: 100px;
19  	transition: width 1.5s, height 3s;
20  	width: 100px;
21  	
22}
23
24div:hover {
25	background-color: red;
26  	height: 300px;	
27  	width: 150px;
28}
29  

1a:hover {
2  color: #252525;
3}