CSS - Move from current position to new fixed position - html

Question

I'm trying to put some buttons on my site, but I'm struggling with positioning some of the animated elements. See the example:
https://codepen.io/dev_loop/pen/MWKYoGJ
<div class="btn-container">
<button>
<span class="text">Hover1</span>
<div class="icon-container">
<div class="icon icon--left">
<svg>
<use xlink:href="#arrow-right"></use>
</svg>
</div>
<div class="icon icon--right">
<svg>
<use xlink:href="#arrow-right"></use>
</svg>
</div>
</div>
</button>
</div>
<div class="btn-container">
<button>
<span class="text">Hover2Test</span>
<div class="icon-container">
<div class="icon icon--left">
<svg>
<use xlink:href="#arrow-right"></use>
</svg>
</div>
<div class="icon icon--right">
<svg>
<use xlink:href="#arrow-right"></use>
</svg>
</div>
</div>
</button>
</div>
<svg style="display: none;">
<symbol id="arrow-right" viewBox="0 0 20 10">
<path d="M14.84 0l-1.08 1.06 3.3 3.2H0v1.49h17.05l-3.3 3.2L14.84 10 20 5l-5.16-5z"></path>
</symbol>
</svg>
<div class="support">
<i class="fab fa-twitter-square"></i>
<i class="fab fa-dribbble"></i>
</div>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100vh;
display: flex;
overflow: hidden;
}
.btn-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: var(--bg);
&:nth-child(1) {
--btn-bg: #da0000;
--bg: #f22c3a;
}
&:nth-child(2) {
--btn-bg: #fac300;
--bg: #fc6100;
}
}
button {
--width: 180px;
--height: 60px;
border: 0;
position: relative;
min-width: var(--width);
min-height: var(--height);
border-radius: var(--height);
color: #fff;
font-family: "Montserrat";
font-weight: bold;
background: rgba(0, 0, 0, 0.3);
cursor: pointer;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
margin: 0 1rem;
.text,
.icon-container {
position: relative;
z-index: 2;
}
.icon-container {
--icon-size: 25px;
position: relative;
width: var(--icon-size);
height: var(--icon-size);
margin-left: 15px;
transition: transform 500ms ease;
.icon {
position: absolute;
left: 0;
top: 0;
width: var(--icon-size);
height: var(--icon-size);
transition: transform 500ms ease, opacity 250ms ease;
&--left {
transform: translateX(-200%);
opacity: 0;
}
svg {
width: 100%;
height: 100%;
fill: #fff;
}
}
}
&::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: var(--btn-bg);
border-radius: var(--height);
z-index: 1;
transition: transform 500ms ease;
}
&:hover {
&::after {
transform: translateX(65%);
}
.icon-container {
transform: translateX(125%);
.icon {
&--left {
transform: translateX(0);
opacity: 1;
}
&--right {
transform: translateX(200%);
opacity: 0;
}
}
}
}
}
.support{
position: absolute;
right: 10px;
bottom: 10px;
padding: 10px;
display: flex;
a{
margin: 0 10px;
color: #fff;
font-size: 1.8rem;
backface-visibility: hidden;
transition: all 150ms ease;
&:hover{
transform: scale(1.1);
}
}
}
In the above, everything works perfectly until you change the text contained within the button itself. Doing this throws off the "hover" positioning of the SVG arrow element, since its parent containers position is decided by the text on the button and its a percentage based translateX.
I want to use this code across multiple buttons with different text on each button and I'm looking to implement something on the transition effects like:
"Move the SVG from whatever its current position is, to right:0; or so when hovered, so the arrow is essentially right aligned"
What I've ended up doing in my code, is creating two different containers for the SVG; One positioned relatively in the "left" position, and another positioned absolute with a right:18px property to "stick" it to the right hand side of the button. I've then animated the opacity and translateX to try and make it look like its following the wipe effect of the button, but it's not really working nicely and looks janky.
https://codepen.io/Delarado/pen/yLqOBRr
<div class="btn-container">
<button>
<span class="text">Reset</span>
<div class="icon-container icon-container--left">
<div class="icon">
<svg>
<use xlink:href="#arrow-right"></use>
</svg>
</div>
</div>
<div class="icon-container icon-container--right">
<div class="icon">
<svg>
<use xlink:href="#arrow-right"></use>
</svg>
</div>
</div>
</button>
</div>
<svg style="display: none;">
<symbol id="arrow-right" viewBox="0 0 20 10">
<path d="M14.84 0l-1.08 1.06 3.3 3.2H0v1.49h17.05l-3.3 3.2L14.84 10 20 5l-5.16-5z"></path>
</symbol>
</svg>
.btn-container {
width: 100%;
height: 100%;
margin: 1em 0;
display: flex;
justify-content: center;
align-items: center;
background: var(--bg);
--btn-bg: #ff9900;
}
button {
--width: 13em;
--height: 60px;
border: 0;
position: relative;
min-width: var(--width);
min-height: var(--height);
border-radius: var(--height);
color: #fff;
font-weight: bold;
font-size: 1.1rem;
background: #ff990075;
cursor: pointer;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
margin: 0 1rem;
border-color: #00000050;
border-width: 1px;
border-style: solid;
.text,
.icon-container {
position: relative;
z-index: 2;
}
.icon-container {
--icon-size: 25px;
position: relative;
width: var(--icon-size);
height: var(--icon-size);
margin-left: 10px;
transition: transform 500ms ease;
.icon {
position: absolute;
left: 0;
top: 0;
width: var(--icon-size);
height: var(--icon-size);
transition: transform 500ms ease, opacity 250ms ease;
svg {
width: 100%;
height: 100%;
fill: #fff;
}
}
&--right {
//transform: translateX(-200%);
display:none;
}
}
&::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: var(--btn-bg);
border-radius: var(--height);
z-index: 1;
transition: transform 500ms ease;
}
&:hover {
//The color of the text upon hovering
color: #000;
&::after {
//The position of the circle upon hovering
transform: translateX(73%);
}
.icon-container {
// //The position of the arrow upon hovering
// //transform: translateX(25%);
&--left {
opacity: 0;
animation: Arrowgo 500ms forwards;
}
&--right {
position: absolute;
right:18px;
display:unset;
animation: Arrowarrive 500ms forwards;
}
}
}
}
#keyframes Arrowgo {
from{
opacity:1;
transform: translateX(0);
}
to{
opacity:0;
transform:translateX(20px);
}
}
#keyframes Arrowarrive {
from{
opacity:0;
transform: translateX(-20px);
}
to{
opacity:1;
transform:translateX(0);
}
}
I also tried a single element with relative position, animated to absolute position on hover but that also looked awful. I can't figure out how to place it just to the right of the button text in a normal state, and then animate it from there over to the right hand side on hover.
I was wondering if anyone smarter than me had a nice elegant solution to this that avoids having a different class for each button to account for the different length text, whilst still maintaining a nice slick wipe effect on both the "secondary" button and the arrow SVG?
Thanks in advance!