Я хочу реализовать кнопку. Это так, когда он не завис: Unovered button

Прозрачный прямоугольник с закругленными краями справа должен перемещаться влево и закрывать всю кнопку за 1 секунду при наведении курсора. Итак, после наведения у нас будет что-то вроде этого:

After hover

Моя проблема в том, что я не знаю, что делать. Я нашел код в Интернете, но он либо идет слева направо, либо выталкивает мой значок стрелки и текст с моей кнопки! Я вообще не хочу, чтобы мой значок стрелки или текст менялись. Я просто хочу, чтобы прозрачный прямоугольник двигался вправо при наведении, а затем возвращался на свое исходное место. Мой код css для моей кнопки без эффекта таков:

.btn {
    color: white;
    display: flex;
    flex-direction: row-reverse;
    Border: 2px solid white;
    border-radius: 10px;
    height: 80%;
    padding-top: 10px;
    width: 100%;
    text-align: center;
    margin-top: 0px;
    padding-right: 0px;
    vertical-align: middle;
    text-decoration: none;
    background-color: #fb815e;
    font-size: 18px;
    font-family: 'Vazir', sans-serif;
}

Обновление: эффект также должен измениться с той же скоростью, когда нет зависания.

1
m0ss 5 Дек 2020 в 17:37

2 ответа

Лучший ответ

Вам нужно, чтобы один элемент был относительным (оболочка), а часть кнопки / растяжения - абсолютной. Таким образом, он будет действовать как наложение. Вы будете полагаться на переход в течение одной секунды и ширину закрывающей части.

Насколько я могу судить, это именно та кнопка, которую вы хотите.

Изменить: вы попросили его вернуть, это делается вторым переходом. Один в наведении, а второй - в самом обычном теге без наведения.

enter image description here

Отказ от ответственности: я понятия не имею, что написано в (арабском?) Тексте, который я использовал.

.btn {
    cursor: pointer;
    height: 40px;
    width: 200px;
    color: white;
    display: flex;
    flex-direction: row-reverse;
    border-radius: 10px;
    vertical-align: middle;
    text-decoration: none;
    background-color: #fb815e;
    font-size: 18px;
    font-family: 'Vazir', sans-serif;
    position: relative;
    text-align: center;
    line-height: 40px;
    border: none;
    margin: 0;
    padding: 0;  
}

.btn:hover .btn-inside {
width: 100%;
transition: width 1s ease;
}

.btn-inside {
opacity: 0.5;
border-radius: 10px;
background-color: #fc9c81;
width: 20%;
height: 40px;
line-height: 40px;
text-align: left;
position: absolute;
transition: width 1s ease;
}

.text {
margin: auto;
}

span {
    display: inline-block;
}
<button class="btn">
    <span class="text">العاشر ليونيكود</span>
    <span class="btn-inside">&nbsp;&nbsp;🡠</span>
</button>
1
Morgosus 5 Дек 2020 в 15:52

Вы можете сделать что-то вроде

className:hover{
//do stuff here
}

А затем поиграйте с непрозрачностью или как хотите :)

1
mooy bot 5 Дек 2020 в 14:43