.button {
	background-color: #4CAF50; /* Green */
	border: none;
	color: white;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 18px;
	margin: 3px 1px;
	transition-duration: 0.4s;
	cursor: pointer;
	box-shadow: 0 8px 16px 0 rgba(1,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.19);
	border: 2px solid green ;
	border-radius: 25px;
	position: relative;
	animation-name: example;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}

.button1 {
	background-color: white; 
	color: black; 
	border: 2px solid #4CAF50;
	border-radius: 12px;
}

.button1:hover {
	background-color: #4CAF50;
	color: blue;	
}

.button2 {
	background-color: white; 
	color: black; 
	border: 2px solid #008CBA;
	border-radius: 12px;
	padding-block: 10px;
	margin-block: 8px;
}

.button2:hover {
	background-color: #008CBA;
	color: white;
}

.button3 {
	background-color: white; 
	color: black; 
	border: 2px solid #f44336;
	border-radius: 12px;
}

.button3:hover {
	background-color: #f44336;
	color: green;
}

.button4 {
	background-color: white;
	color: black;
	border: 2px solid #e7e7e7;
	border-radius: 12px;
}

.button4:hover {background-color: #e7e7e7;}

.button5 {
	background-color: white;
	color: black;
	border: 2px solid #555555;
	border-radius: 12px;
}

.button5:hover {
	background-color: #555555;
	color: yellow;
}

/* animation */
#div {
	width: 100px;
	height: 100px;
	background-color: red;
	position: relative;
	animation-name: example;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}

@keyframes example {
	0%   {background-color:red; left:0px; top:0px;}
	25%  {background-color:yellow; left:200px; top:0px;}
	50%  {background-color:blue; left:200px; top:200px;}
	75%  {background-color:green; left:0px; top:200px;}
	100% {background-color:red; left:0px; top:0px;}
}