HTML Combining 2 hover effects - html

Question

Hi I am trying to combine 2 hover effects. First hover effect takes places when you hover over the button, the other one is when you hover over the arrow. I am trying to combine those 2 hover effects to take place simultaneously. Could anyone please help me with that? Thank you so much
.btnMain {
padding: 15px 110px;
text-align: center;
transition: 0.5s;
background-size: 200% auto;
color: white;
box-shadow: 0 0 20px #eee;
border-radius: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing:1px;
margin-top:40px;
font-size:16px;
display: inline-block;
border: 2px;
font-family: "Raleway", sans-serif;
cursor: pointer;
moz-transition: all .4s ease-in-out;
}
.btnMain:hover {
background-position: 100% 0;
color:#fff;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.gradient {
background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
box-shadow: 0 4px 15px 0 rgb(65 132 234 / 75%);
}
.arrowIntro {
color: black;
font-size:60px;
margin-left:-2%;
}
.arrowIntro::before {
display: inline-block;
padding-left: -8px;
content: "🠒";
transition: transform 0.3s ease-out;
position: relative;
top: 16px;
left: 3px;
}
.arrowIntro:hover {
color: black;
}
.arrowIntro:hover::before {
transform: translateX(12px);
}
Contact me<a id="arrowIntroId" href="#kontakt" class="arrowIntro"></a>

Answer 1

Please refer to CSS Transform Modules. Also, a technicality: You were trying to move the arrow on .arrowIntro:hover while you wanted it to move on .btnMain:hover
.btnMain {
padding: 15px 110px;
text-align: center;
transition: 0.5s;
background-size: 200% auto;
color: white;
box-shadow: 0 0 20px #eee;
border-radius: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing:1px;
margin-top:40px;
font-size:16px;
display: inline-block;
border: 2px;
font-family: "Raleway", sans-serif;
cursor: pointer;
moz-transition: all .4s ease-in-out;
position: relative;
}
.btnMain:hover {
background-position: 100% 0;
color:#fff;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.gradient {
background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
box-shadow: 0 4px 15px 0 rgb(65 132 234 / 75%);
}
.arrowIntro {
margin-left:10px;
display:inline-block;
color: black;
position:absolute;
top:7px;
right:20px;
transition: transform 500ms ease-in-out 25ms;
}
.arrowIntro::before {
content: "→";
font-size:30px;
color: white;
}
.btnMain:hover .arrowIntro {
transform: translateX(12px);
color: red;
}
Contact me<div class="arrowIntro"></div>

Answer 2

You need to move the hover to the .btnMain element:
.btnMain:hover .arrowIntro {
color: black;
}
.btnMain:hover .arrowIntro::before {
transform: translateX(12px);
}
Also, you cannot have an a tag within another a tag. That's malformed HTML and the first a will close at the first closing a. I changed that to a span.
.btnMain {
padding: 15px 110px;
text-align: center;
transition: 0.5s;
background-size: 200% auto;
color: white;
box-shadow: 0 0 20px #eee;
border-radius: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 40px;
font-size: 16px;
display: inline-block;
border: 2px;
font-family: "Raleway", sans-serif;
cursor: pointer;
-moz-transition: all .4s ease-in-out;
}
.btnMain:hover {
background-position: 100% 0;
color: #fff;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.gradient {
background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
box-shadow: 0 4px 15px 0 rgb(65 132 234 / 75%);
}
.arrowIntro {
color: black;
margin-left: -2%;
}
.arrowIntro::before {
display: inline-block;
padding-left: -8px;
content: "🠒";
transition: transform 0.3s ease-out;
position: relative;
left: 4px;
}
.btnMain:hover .arrowIntro {
color: black;
}
.btnMain:hover .arrowIntro::before {
transform: translateX(12px);
}
Contact me<span id="arrowIntroId" class="arrowIntro"></span>