<div class="btn-container">
<div class="btn btn1">
<button>Hover Me</button>
</div>
</div>
<!--The other button -->
<div class="buttons-container">
<button id="one">Hover me</button>
</div>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* body {
background-color: orange;
color: #fff;
} */
.btn-container {
background: orange;
width: 100%;
height: 500px;
text-align: center
}
.btn {
display: inline-block;
margin: 20px;
}
.btn button {
background: transparent;
padding: 20px;
border: none;
color: #fff;
font-family: Arial, sans-serif;
font-size: 1.2em;
cursor: pointer;
}
.btn1 {
border: 1px solid #fff;
position: relative;
z-index: 1; /* Added z-index of 1 so its on top*/ */
}
.btn1 button:hover {
color: orange;
}
.btn1 button:before {
content: '';
height: 100%;
width: 0%;
position: absolute;
transition: width 0.3s ease-in-out;
top: 0px;
left: 0px;
background-color: #fff;
z-index: -1; /* z-index of -1 alwasy sits farthest back */
}
.btn1 button:hover:before {
width: 100%;
}
/*==========================
The other button
============================*/
body {
background-color: green;
color: #fff;
}
.buttons-container {
margin-top: 20px;
text-align: center;
}
.buttons-container button {
padding: 20px;
margin: 20px;
background-color: transparent;
color: #fff;
border: 0px;
cursor: pointer;
font-size: 1.2em;
}
#one {
border: 1px solid #fff;
position: relative;
transition: color 0.3s ease-in-out;
}
#one:hover {
color: green;
}
#one:after {
content: "";
height: 100%;
width: 0%;
position: absolute;
transition: width 0.3s ease-in-out;
top: 0px;
left: 0px;
background-color: #fff;
z-index: -1;
}
#one:hover:after {
width: 100%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.