Hover Animation In CSS Part 6

Опубликовано: 02 Январь 2022
на канале: 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);
}

Смотрите видео Hover Animation In CSS Part 6 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Masters In Web Design 02 Январь 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 3 раз и оно понравилось 1 людям.