First of all here's my code:
body{
background: #00BCD4;
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="18" viewBox="0 0 100 18"%3E%3Cpath fill="%239C92AC" fill-opacity="0.4" d="M61.82 18c3.47-1.45 6.86-3.78 11.3-7.34C78 6.76 80.34 5.1 83.87 3.42 88.56 1.16 93.75 0 100 0v6.16C98.76 6.05 97.43 6 96 6c-9.59 0-14.23 2.23-23.13 9.34-1.28 1.03-2.39 1.9-3.4 2.66h-7.65zm-23.64 0H22.52c-1-.76-2.1-1.63-3.4-2.66C11.57 9.3 7.08 6.78 0 6.16V0c6.25 0 11.44 1.16 16.14 3.42 3.53 1.7 5.87 3.35 10.73 7.24 4.45 3.56 7.84 5.9 11.31 7.34zM61.82 0h7.66a39.57 39.57 0 0 1-7.34 4.58C57.44 6.84 52.25 8 46 8S34.56 6.84 29.86 4.58A39.57 39.57 0 0 1 22.52 0h15.66C41.65 1.44 45.21 2 50 2c4.8 0 8.35-.56 11.82-2z"%3E%3C/path%3E%3C/svg%3E');
}
.conteiner{
background: #E0F7FA;
height: 500px;
width: 600px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
box-shadow: 0 5px 20px rgba(0,0,0,0.4);
border-radius: 15px;
}
.button{
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-decoration: none;
color: #fff;
font-size: 30px;
font-family: Arial;
font-weight: 700;
height: 90px;
width: 190px;
background: #00ACC1;
border-radius: 15px;
align-items: center;
justify-content: center;
box-shadow: 0 5px 10px rgba(0,0,0,0.4);
transition: 0.6s;
}
.button::before{
content:'';
position: absolute;
top:0;
left: 0;
height: 100%;
width: 45%;
background: #00B6CC;
z-index: -1;
transform: scale(0);
transform-origin: top left;
transition: transform 0.5s;
border-radius: 15px;
}
.button::after{
content:'';
position: absolute;
top:0;
right: 0;
height: 100%;
width: 45%;
background: #00A1B5;
z-index: -1;
transform: scale(0);
transform-origin: bottom right;
transition: transform 0.5s;
border-radius: 15px;
}
.button:hover:after{
transform: scale(1);
transform-origin: bottom right;
}
.button:hover:before{
transform: scale(1);
transform-origin: top left;
}
.button:hover{
height: 100%;
width: 100%;
color: rgba(0,0,0,0);
}
i.fa-user{
position: absolute;
top:50%;
left: 20%;
transform:translateY(-50%);
font-size: 40px;
color: white;
opacity: 0;
transition: .5s;
}
i.fa-cogs{
position: absolute;
top:50%;
right: 20%;
transform:translateY(-50%);
font-size: 40px;
color: white;
opacity: 0;
transition: .5s;
}
.button:hover i{
opacity: 1;
}
.fa-user:hover + .button:before{
width: 90%;
}<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
</head>
<div class="conteiner">
<a href="#" class="button">
Hover me
<i class="fas fa-user"></i>
<i class="fas fa-cogs"></i>
</a>
</div>So, I have :before and :after pseudo elements on my .button (anchor). And I have some Font-Awesome icons that appear when the .button is hovered. Also my :before and :after take the full height and 45% width. So what I want to do is when the icon is hovered, that pseudo element, either :before or :after takes 90% width, and the other pseudo element gets pushed either to left or right.
But main question is how to I trigger pseudo elements to change when hovering over the icon.
Thank You.
