I am currently practicing CSS animations , transitions and have been developing a lot of buttons but have been encountering errors in a few buttons . I am trying to implement the hover effect on the button, but the effect is not working properly. In more detail, overflow:hidden causes in particular the bottom and right borders to be hidden. possible cause could be the parent body tag has the CSS property of grid with align items center . I am making the buttons in my Codepen : codepen
Visit the link to see the effect in play .
In particular, I am talking about the button with the ‘border-4-but’ class . Ideally, the borders grow in the following way :
-
top : grow from left to right and come into existence
-
right : top to bottom
-
bottom : left to right
-
left : bottom to top
CSS :
.border-4-but {
margin-top : 20px;
/* border : solid 3px ; */
position : relative;
color : deepskyblue;
padding : 10px 20px;
overflow : hidden;
}
.border-4-but:before{
content : "";
position : absolute;
top : 0;
left : -100%;
height : 100%;
width : 100%;
border-top : solid 2px;
transition : all 1s;
}
.border-4-but:after{
content : "";
position : absolute ;
top : -100%;
left : 0;
width : 100%;
height : 100%;
border-right : solid 2px;
transition : all 1s;
}
.border-4-but span:after{
content : "";
position : absolute;
top : 0;
left : 100%;
width : 100%;
height : 100%;
border-bottom : solid 2px;
transition : all 1s;
}
.border-4-but span:before{
content : "";
position : absolute;
top : 100%;
left : 0;
height : 100%;
width : 100%;
border-left : solid 2px;
transition : all 1s;
}
.border-4-but:hover:before,
.border-4-but:hover:after,
.border-4-but:hover span:after,
.border-4-but:hover span:before {
top : 0;
left : 0;
}
HTML body:
<body>
// some other buttons
<a class="border-4-but"><span class="border-4-span"></span>hover here</a>
// some other buttons
</body>
Tried different overflow properties to resolve issue to no avail , any explanation / alternatives would be appreciated .
andhakasur is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.