CODEWITHSUNDEEP
csscss-selectorshover
m0ss
m0ss

Reputation: 462

html/css button transparent second layer hover effect

I want to implement a button. It is like this when it's not hovered: Unovered button

the transparent rounded-bourder rectangle in the right is supposed to move left and cover the entire button in 1 second, when hovered. so, after hover, we'll have something like this:

After hover

My problem is that I don't know what to do. I found some code on the internet but either it comes from left to right or it pushes my arrow icon and text out of my button! I don't want my arrow icon or text change at all. I just want that the vright transparent rectangle move to right upon hover and then come back to it's original place. My css code for my button withoug effect is this:

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

update: The effect should also reverse with the same speed when there's no hover.

Upvotes: 1

Views: 948

Answers (2)

Morgosus
Morgosus

Reputation: 827

You'll want one element to be relative (wrapper) and the button / stretching part to be absolute. That way it will act as an overlay. You'll be relying on the transition for the one second, and width for the covering part.

This is, as far as I can tell, the exact button you want.

Edit: You asked for it to return, that's done by a second transition. One in the hover and a second one in the regular non-hover tag itself.

enter image description here

Disclaimer: I have no idea what the (Arabic?) text I used says.

.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>

Upvotes: 1

mooy bot
mooy bot

Reputation: 86

You can do something like

className:hover{
//do stuff here
}

and then play around with opacity or whatever you wish to :)

Upvotes: 1

Related Questions