I'm attempting to create an animated effect by having a rectangle expand over the button when hovered by the user. However, I am unsure how to achieve this and have hit a roadblock.
Here's what I want:
- There's a button.
- There's a rectangle positioned somewhere.
- The rectangle currently has a width of 0px.
- I want the rectangle to increase from 0 to 200px in width when the button is hovered over. Not the button itself.
I am open to javascript solutions, but they must be explained at a beginner level for me to understand.
Currently, here is my code:
HTML:
<div class="flex-container">
<div class="sidebar">
<button style="margin-top: 100px;" onclick="Accueil()"><div style="z-index: 2;">Accueil</div></button>
<div class="rectangle" name="acc" style="top: 100px;"></div>
<button onclick="Thés()"><div style=&
quot;z-index: 2;">Thés</div></button>
<div class="rectangle" name="the" style="top: 100px;"></div>
<button onclick="Tisanes()"><div style="z-index: 2;">Tisanes</div></button>
<div class="rectangle" name="tis" style="top: 100px;"></div>
<button onclick="Théières()"><div style="z-index: 2;">Théières</div></button>
<div class="rectangle" name="thei" style="top: 100px;"></div>
</div>
CSS:
.sidebar > button {
margin: 20px; /* 30px margin between buttons */
width: 200px;
height: 60px;
max-height: 60px !important;
max-width: 200px !important;
background-color: #F5FAD2;
text-align: center;
font-size: 24px;
border-radius: 7%;
border: none;
transition-duration: 0.4s;
cursor: pointer;
color: #404040;
position: relative;
}
.rectangle {
width: 0px;
height: 60px;
color: rgba(255, 255, 255, 0.144);
border-radius: 7%;
border: none;
transition: width 1.1s ease 0s;
transition-timing-function: ease;
transition-delay: 0s;
position: absolute;
z-index: 1;
}
.rectangle button:hover {
width: 200px;
}
Thank you.