Turning links into buttons

by danielkwood

HTML

<html>
    <head>
        <title>Styling links</title>
        <link rel="stylesheet" href="theme.css" type="text/css"/>
    </head>
    <body>
        <h1>Home</h1>
        <a class="btn" href="index.html">Home</a>
        <a class="btn" href="about.html">About Us</a>
        <a class="btn" href="products.html">Products</a>
        <a class="btn" href="contact.html">Contact Us</a>
    </body>
</html>

CSS

body{
  font-family: Arial;
}
.btn{
  font-family: Arial;
  padding: 10px 20px 10px 20px;
  border-radius: 5px;
  color: rgb(0,0,0);
  background-color: rgb(197,201,199);
  text-decoration: none;
  transition: 0.4s;
}

.btn:hover{
  background-color: rgb(13,135,82);
  color: rgb(255,255,255);
  box-shadow: 2px 2px 10px rgb(160, 160, 160);
}