Animation when hovering over a button - html

Question

I am trying to make some animated effect by adding a rectangle that expands over the button when the button (not the rectangle since it's set to width: 0px;) is hovered over by the user. Though, I don't really know how to do that, so I'm blocked.
So:
There's a button.
There's a rectangle somewhere.
The rectangle is 0px width.
I want the rectangle to grow from 0 to 200px width when the button is hovered. NOT the button.
I accept javascript solutions but only like real basic ones cause I'm a beginner, I won't understand javascript if it's not explained to me.
For the moment, here's 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="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; /* marge de 30px entre les boutons */
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;
}
Thanks.

Answer 1

<button> Button </button>
button{
transition:0.2s;
}
button:hover{
width:200px
}

Answer 2

You can add the transform property in the button CSS class. This will work to increase the size of the rectangle. You can adjust the value inside the scale to get the desired size when hovered. Copy the CSS & HTML codes below to have that working.
CSS:
.sidebar>button {
margin: 20px;
/* marge de 30px entre les boutons */
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;
}
.btn:hover {
width: 300px;
transform: scale(1.3) perspective(0.4px);
}
.rectangle {
color: rgba(255, 255, 255, 0.144);
border-radius: 7%;
border: none;
position: absolute;
z-index: 1;
}
HTML:
<div class="flex-container">
<div class="sidebar">
<button style="margin-top: 100px;" class="btn">
<div style="z-index: 2;">Accueil</div>
</button>
<div class="rectangle" name="acc" style="top: 100px;"></div>
<button class="btn">
<div style="z-index: 2;">Thés</div>
</button>
<div class="rectangle" name="the" style="top: 100px;"></div>
<button class="btn">
<div style="z-index: 2;">Tisanes</div>
</button>
<div class="rectangle" name="tis" style="top: 100px;"></div>
<button class="btn">
<div style="z-index: 2;">Théières</div>
</button>
<div class="rectangle" name="thei" style="top: 100px;"></div>
</div>
</div>
Hope this solution helps you!

Answer 3

Maybe it will be useful to you
.rectangle-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
background: #e1e1e1;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
padding:20px;
color:#000;
text-decoration: none;
}
.rectangle-out:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2098D1;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.rectangle-out:hover, .rectangle-out:focus, .rectangle-out:active {
color: white;
}
.rectangle-out:hover:before, .rectangle-out:focus:before, .rectangle-out:active:before {
-webkit-transform: scale(1);
transform: scale(1);
}
<a class="rectangle-out" href="#">Rectangle Out</a>

Answer 4

Maybe it will be useful to you.
visit my GitHub page. my website total source code here. many Animation when hovering over a button
here.
https://github.com/jacksonkasi0/mhibuddy
(or) visit my website: https://mahibuddy.me
(or)
HTML:
<div class="lo">
<ul>
<li>
<a href="./love/love.html" target="_blank">
<i class="fa fa-heart"></i>
</a>
</li>
</ul>
</div>
CSS:
.lo ul {
margin: 0;
padding: 0;
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);}
.lo > ul > li {
list-style: none;
margin: 0 15px;}
.lo > ul > li > a {
position: relative;
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 63px;
background: #333;
border-radius: 50%;
font-size: 30px;
color: #666;
transition: 0.5s;}
.lo>ul>li>a :hover{
position: relative;
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 63px;
background: rgb(255, 255, 255);
border-radius: 50%;
font-size: 30px;
/* color: #666; */
transition: 0.3s;}
.lo > ul > li > a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: #ff05de;
transition: .5s;
transform: scale(.9);
z-index: -1;}
.lo > ul > li > a:hover::before {
transform: scale(1.1);
box-shadow: 0 0 15px #ff6e9e;}
.lo > ul > li > a:hover {
color: #ff1058;
box-shadow: 0 0 5px #ff1088;
text-shadow: 0 0 5px #ff1044;}

Answer 5

I think I have what you are looking for now
.flex-container {
display: flex;
flex-direction: row;
justify-content: center;
}
.rectangle {
display: none;
}
.button {
width: 200px;
height: 60px;
background-color: #F5FAD2;
text-align: center;
font-size: 24px;
border-radius: 7%;
border: none;
transition-duration: 0.4s;
cursor: pointer;
color: #404040;
position: relative;
margin-right: 20px;
}
.button:hover + .rectangle {
display: block;
width: 200px;
}
<div style="text-align:center" class="flex-container">
<div class = "button">Accueil</div>
<div class="rectangle">test</div>
<div class = "button">Thés</div>
<div class="rectangle">test</div>
<div class = "button">Tisanes</div>
<div class="rectangle">test</div>
<div class = "button">Théières</div>
<div class="rectangle">test</div>
</div>
You can checkout the fiddle I made with this info here: https://jsfiddle.net/mbmarketing4you/j92mgsy6/46/
You have to make the "rectangle" a child of the button in order for the hover effect to work.