Hover Animation In CSS Part 6

Published: 02 January 2022
on channel: Masters In Web Design

How to make hover effect in CSS
#Masters In Web Design

/*CSS*/
*,*::before,*::after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
min-height: 100vh;
background: #e0ed5f;
display: grid;
place-items: center;
}
body a{
color: #000e20;
font-size: 3rem;
text-decoration: none;
display: inline-block;
padding: 12px;
position: relative;
}
body a::before, body a::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 0.5s ease;
border-style: solid;
border-color: #000e20;
}
body a::before{
border-width: 3px 0 3px 0;
transform: scaleX(0);
}
body a::after{
border-width: 0 3px 0 3px;
transform: scaleY(0);
}
body a:hover::before, body a:hover::after{
transform: scale(1, 1);
}

Watch video Hover Animation In CSS Part 6 online without registration, duration hours minute second in high quality. This video was added by user Masters In Web Design 02 January 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 3 once and liked it 1 people.

215