Эффект перехода начинается с ВЕРХНЕГО ЛЕВОГО угла, но нужно, чтобы он начинался с левого угла. ⇐ CSS

[Anonymous]

Эффект перехода начинается с ВЕРХНЕГО ЛЕВОГО угла, но нужно, чтобы он начинался с левого угла.
По сути, я пытаюсь сделать его похожим на небольшую полосу загрузки, которая загружается при наведении курсора на блок.

Код: Выделить всё

.buttonFrame {
position: relative;
width: 55px;
height: 20px;
border-radius: 12px;
border: 2px solid black;
overflow: hidden;
top: 30%;
left: 45%;
z-index: 100px;
}

.btn {
border-radius: 12px;
width: 0%;
height: 0%;
background: linear-gradient( 90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(6, 78, 166, 1) 57%, rgba(3, 134, 203, 1) 75%, rgba(2, 156, 218, 1) 82%, rgba(0, 212, 255, 1) 100%);
background-position: 0 0;
transition: width 2s, height 2s;
/* Added height transition */
}

.buttonFrame:hover .btn {
/* Changed to target .btn on hover of .buttonFrame */
width: 100%;
/* Adjusted width for hover effect */
height: 100%;
/* Adjusted height for hover effect */
background-position: 0 0;
/* transform: scaleX(2); */
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/785 ... t-from-lef