Hide :before on :hover button - html

Question

I am missing how I should hide the :before element, and only make it visible when it is "inside" the button div, to create a filling effect on the hover button.
a.button {
font-size: 20px;
color: #000;
border: 2px solid #000;
padding: 8px 12px;
position: relative;
margin: 0;
}
a.button:before {
transition: 0.5s all ease-in-out;
content: '';
position: absolute;
background-color: red;
top: 100%;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
a.button:hover {
transition: 0.6s all ease-in-out;
color: #fff;
}
a.button:hover:before {
transition: 0.5s all ease-in-out;
top: 0;
}
buttt

Answer 1

Set the :before element height to 0 , then change it on :hover:before to 100%
The snippet
a.button {
font-size: 20px;
color: #000;
border: 2px solid #000;
padding: 8px 12px;
position: relative;
margin: 0;
}
a.button:before {
transition: 0.5s all ease-in-out;
content: '';
position: absolute;
background-color: red;
top: 100%;
left: 0;
width: 100%;
height: 0;
z-index: -1;
}
a.button:hover {
transition: 0.6s all ease-in-out;
color: #fff;
}
a.button:hover:before {
transition: 0.5s all ease-in-out;
top: 0;
height:100%;
}
buttt

Answer 2

you can wrap your link in a div and set overflow to hidden like this :
a.button {
font-size: 20px;
color: #000;
border: 2px solid #000;
padding: 8px 12px;
position: relative;
margin: 0;
}
a.button:before {
transition: 0.5s all ease-in-out;
content: '';
position: absolute;
background-color: red;
top: 100%;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.wrap {
float: left;
width: 65px;
height: 32px;
overflow: hidden;
}
a.button:hover {
transition: 0.6s all ease-in-out;
color: #fff;
}
a.button:hover:before {
transition: 0.5s all ease-in-out;
top: 0;
}
<div class="wrap">buttt</div>

Answer 3

Add display:inline-block and overflow:hidden to a.button styling, as default display of a tag is inline.
a.button {
font-size: 20px;
color: #000;
border: 2px solid #000;
padding: 8px 12px;
position: relative;
margin: 0;
overflow:hidden;
display:inline-block; /* Add this */
overflow:hidden; /* Add this */
}
a.button:before {
transition: 0.5s all ease-in-out;
content: '';
position: absolute;
background-color: red;
top: 100%;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
a.button:hover {
transition: 0.6s all ease-in-out;
color: #fff;
}
a.button:hover:before {
transition: 0.5s all ease-in-out;
top: 0;
}
buttt

Answer 4

Only insert This:
a.button {
display: inline-block;
overflow: hidden;
//Other Codes...
}
a.button {
font-size: 20px;
color: #000;
border: 2px solid #000;
padding: 8px 12px;
position: relative;
margin: 0;
display: inline-block;
overflow: hidden;
}
a.button:before {
transition: 0.5s all ease-in-out;
content: '';
position: absolute;
background-color: red;
top: 100%;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
a.button:hover {
transition: 0.6s all ease-in-out;
color: #fff;
}
a.button:hover:before {
transition: 0.5s all ease-in-out;
top: 0;
}
buttt