Шаблони кодів CSS

Сховати блок візуально

Місце буде займати

opacity: 0;
visibility: hidden;
pointer-events: none;

Сховати блок фактично

Не буде займати місця

display: none

Вірівняти по центру

.test-box{
display: flex;
justify-content: center;
justify-items: center;
align-items: center;
text-align: center;
}

Анімація кнопки (on-hover) 1

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
</header>
<section class="one">
<button type="button" class="btn">On-Hover</button>
</section>
</body>
</html>

CSS

.btn{
position: relative;
overflow: hidden;
}
.btn::before{
content:'';
position: absolute;
top: -10px;
bottom: -10px;
left: -30px;
width: 10px;
rotate: 35deg;
background-color: #fff;
}
.btn:hover::before{
left: calc(100% + 30px);
transition: left 500ms;
}