I am trying to create a transition where the black background of the arrow on the right just grow a little to the left:
<style>
.css-button {
width: 60%;
font-size: 16px;
border-radius: 5px;
border: solid 3px #000000;
cursor: pointer;
position: relative;
background: white;
display: flex;
justify-content: space-between;
/* Spread items to each end of the button */
align-items: center;
padding: 0;
}
.css-button-text {
padding-left: 10px;
}
.css-button:hover {
background: red;
}
.css-button-icon {
position: relative;
border-left: 1px solid #ffffff29;
padding: 10px 12px;
background: #000000;
color: #fff;
}
.css-button:hover .css-button-icon {
color: #ff0000;
}
</style>
<body>
<button class="css-button">
<span class="css-button-text">BUTTON</span>
<span class="css-button-icon">></span>
</button>
</body>
I tried putting width: 120%; under .css-button:hover .css-button-icon and it was just expanding very weirdly.
I want it to work like so:
I have been struggling for a couple of hours trying to figure this out, any help would be appreciated. Thank you very much.
>Solution :
.css-button {
width: 60%;
font-size: 16px;
border-radius: 5px;
border: solid 3px #000000;
cursor: pointer;
position: relative;
background: white;
display: flex;
justify-content: space-between;
/* Spread items to each end of the button */
align-items: center;
padding: 0;
}
.css-button-text {
padding-left: 10px;
}
.css-button-icon {
position: relative;
border-left: 1px solid #ffffff29;
padding: 10px 12px;
background: #000000;
color: #fff;
transition: all 0.3s ease;
transform-origin: right;
}
.css-button:hover .css-button-icon {
color: #ff0000;
transform: scaleX(1.3);
}
.css-button:hover {
background: red;
}<button class="css-button">
<span class="css-button-text">BUTTON</span>
<span class="css-button-icon">></span>
</button>