<a href="https://www.example.co.uk">
<div id="btn1" class="button">
<h1>HOME</h1>
</div>
</a>
<a href="https://www.example.co.uk">
<div id="btn2" class="button">
<h1>TUTORIALS</h1>
</div>
</a>
<a href="https://www.example.co.uk">
<div id="btn3" class="button">
<h1>ABOUT</h1>
</div>
</a>
body {
background-color: #e74c3c;
}
h1 {
font-family: verdana, sans-serif;
font-weight: bold;
text-align: center;
position: relative;
top: -10px;
}
a {
text-decoration: none;
}
#btn1 {
top: 100px;
}
#btn2 {
top: 200px;
}
#btn3 {
top: 300px;
}
div.button {
background-color: #ffffff;
color: #2c3e50;
border: none;
border-radius: 30px;
width: 500px;
height: 60px;
position: fixed;
left: -435px;
transition: .7s ease;
}
div.button:hover {
background-color: #ffffff;
position: fixed;
left: -50px;
width: 600px;
border-radius: 0px;
box-shadow: 0px 5px 0px #c0392b;
}
div.button:active {
background-color: #2c3e50;
transition: 0s;
color: #ecf0f1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.