Outlined buttons with links

by Naresh

HTML

<div id="button1"><a href="#">Delivery</a></div>
<div id="button2"><a href="#">Collection</a></div>
<div id="button3"><a href="#">Exchange</a></div>
<div id="button4"><a href="#">All jobs</a></div>

CSS

div { border-radius: 5px; float: left; margin: 10px; }
a { display: block; color: black; padding: 10px 20px; text-decoration: none; }
#button1 { border: 1px solid #5278db; }
#button2 { border: 1px solid #ff5050; }
#button3 { border: 1px solid #00b359; }
#button4 { border: 1px solid #0099cc; }
#button1 a:hover { background-color: #5278db; color: white; }
#button2 a:hover { background-color: #ff5050; color: white; }
#button3 a:hover { background-color: #00b359; color: white; }
#button4 a:hover { background-color: #0099cc; color: white; }