How to implement animations when you hover over a button-CodePudding

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 >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?

CodePudding user response：

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

CodePudding user response：

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 >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>

<button >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