Document

====== Шаблони кодів 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





    
    
    Document

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;
}