Шаблони кодів CSS
Сховати блок візуально
Місце буде займати
opacity: 0; visibility: hidden; pointer-events: none;
Сховати блок фактично
Не буде займати місця
display: none
Вірівняти по центру flex
.test-box{
display: flex;
justify-content: center;
justify-items: center;
align-items: center;
text-align: center;
}
Вірівняти по центру обїекту з абсолютним позіціюванням в.1
.centered{
position: absolute;
top: 50%;
left: 50%;
transform: translate (-50%, -50%);
}
Вірівняти по центру обїекту з абсолютним позіціюванням в.2
.centered{
inset: 0;
margin: auto;
}
Анімація кнопки (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;
}