'How to implement animations when you hover over a button

Im currently trying to implement this animation when you hover over a button: https://codepen.io/webLeister/pen/XwGENz

I want it to only work upon hovering over the + not the text in my button. here is the button code, it is a .svg:

<button class="bubble-animation">Add more 
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 7L14 7" stroke="#222222" stroke-opacity="0.7" stroke-width="1.5"/>
<path d="M7 14L7 -7.15256e-07" stroke="#222222" stroke-opacity="0.7" stroke-width="1.5"/>
</svg>
</button>

I don't want it to twist to the side or anything, just the hover animation. Does anyone know how i would go about doing this?

htmlcssanimationsvgcss-animations


Solution 1:[1]

I want it to only work upon hovering over the + not the text in my button.

The plus, that is actually an arrow, you mean ...?

Currently, the bubbles moving are triggered on hover over the button, by this part:

.button{
  &_inner{
    &:hover .button_spots{ ... }

That whole last part &:hover .button_spots{ /*...*/ } needs to be triggered by hovering on the i icon now, so it a) needs to be moved into .button{ &_inner{ i.l{ ... }}}, and b) the selector needs to be modified - currently it just selects .button_spots ancestors of the button itself, but these elements are not ancestors of the i element. So we need to target the .b_l_quad sibling of the icon first, and then the bubbles inside that:

&:hover ~ .b_l_quad .button_spots { ... }

Somehow the codepen always messes it up when I try to fork it, but here is the full modified version of your SCSS: https://pastebin.com/8tTQw9Ru

Solution 2:[2]

Here you can add class to svg and change the button_inner class in your reference code.

or you can wrap svg in an div and trigger hover on it.

This means change .button_inner:hover in that code to .hovered:hover

And dont forget to add button_spots divs if you want those dots effect in background.

Add More will not shift to side as in the refferece code downloads is in a span so it will not affect Add More

<button class="bubble-animation">Add more 
<svg class='hovered' width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 7L14 7" stroke="#222222" stroke-opacity="0.7" stroke-width="1.5"/>
<path d="M7 14L7 -7.15256e-07" stroke="#222222" stroke-opacity="0.7" stroke-width="1.5"/>
</svg>
</button>

or

<button class="bubble-animation">Add more 
<div class='hovered'>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 7L14 7" stroke="#222222" stroke-opacity="0.7" stroke-width="1.5"/>
<path d="M7 14L7 -7.15256e-07" stroke="#222222" stroke-opacity="0.7" stroke-width="1.5"/>
</svg>
 <div class='b_l_quad'>
        <div class='button_spots'></div>
        <div class='button_spots'></div>
</div
</div>
</button>

2nd option would be better

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 CBroe
Solution 2

Related Questions