I am working with a set of buttons that have an animation named "slideIn". The keyframes for this animation are as follows:
@keyframes slideIn {
0% {opacity: 0; transform: translate(-200px);}
100% {opacity: 1; padding-left: 110px; width: 300px; margin-left: -100px;}
}
In addition to the slideIn animation, I have also implemented a button:hover property:
button:hover{
transform: scale(1.1);
}
While this hover effect works for all buttons, I am looking to customize it specifically for buttons using the slideIn animation. I attempted the following, but it was not successful:
button:hover + @slideIn{
transform: scale(1.1);
}
To help illustrate what I am trying to achieve, here is some example code that resembles the desired outcome:
@keyframes slideUp {
0% {opacity: 0; transform: translateY(500px);}
100% {opacity: 1;}
.hover {
transform: scale(1.1);
}
}
Lastly, here is the HTML code for my button:
<button style="text-align: left; width: 200px; opacity: 0; animation-name: slideIn; animation-duration: 0.3s; animation-fill-mode: forwards; animation-delay: {{$delay}}s;" type="submit" class="apply-anim btn btn-outline-primary shadow" name="dateBtn" value="<?php echo $value_key;?>" data-bs-toggle="tooltip" data-bs-placement="right" title="All {{$value_key}}">{{date('d', strtotime($value_key)) . ". " . $month . " " . date('Y', strtotime($value_key))}}
<span style="float: right;" class="badge bg-danger shadow">{{$value_value}}</span>
</button>
Any assistance on this matter would be greatly appreciated.