STYLING THE OUTLINE BUTTON
Run 
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML</title>
<style>
   .btn {
	  border: 2px solid black;
	  background-color: white;
	  color: black;
	  padding: 16px ;
	  font-size: 20px;
	  cursor: pointer;
	}

	/* Green */
	.green {
	  border-color: green;
	  color: green;
	}
    
	.green:hover {
	  background-color: green;
	  color: white;
	}

	/* Blue */
	.blue {
	  border-color: blue;
	  color: blue;
	}
	.blue:hover {
	  background-color: blue;
	  color: white;
	}
	.orange	{
	  border-color: orange;
	  color: orange;
	}
	.orange:hover {
	  background-color: orange;
	  color: white;
	}
	.red {
	  border-color: red;
	  color: red;
	}
	.red:hover {
	  background-color: red;
	  color: white;
	}
	.gray {
	  border-color: gray;
	  color: gray;
	}
	.gray:hover {
	  background-color: gray;
	  color: white;
	}

   
</style>
</head>  
<body>
    <h2> Outline styled button </h2>
    <button class="btn green">Button</button>
	<button class="btn blue">Button</button>
	<button class="btn orange">Button</button>
	<button class="btn red">Button</button>
	<button class="btn gray">Button</button>
	
</body>
</html>