Amazing Pure CSS Ripple Animations Hover Effect on Buttons with HTML and Inline SVG

Amazing Pure CSS Ripple Animations Hover Effect on Buttons with HTML and Inline SVG


hello everyone today I will show you how
to create this really cool ripple animation effect I’m not sure if you’ve
seen anything like this before from my experience it’s still not something I
see being used on many websites for this effect I will be using just plain HTML
and CSS so everybody can easily follow I also want to say thank you for watching
don’t forget to like the video if you liked it subscribe for more and click
the bell icon so you get notified whenever I release a new video so we will start with basic HTML markup
wrap everything up in a div with a class of container so we can center our
buttons later always try to use semantic markup especially in the production
button tag is accessible by screen readers by default and google crawlers
and other algorithms prefer these so always try to use it over div with a
class of button inside a button we will place 10 span elements to serve as our
ripples and a P tag for label here I will create four buttons Home About
Products and Contact I like to start my CSS with basic
reset rules so we don’t get any unexpected behaviour in different
browsers now we centre our container by giving it width, position:relative and
margin 70 pixels top / bottom and auto on left and right since I’m using html5 button element
first I need to remove default styling otherwise it will interfere with SVG
filter I will be using later and also let’s give it some margin-bottom we will
need space for the effect So we have ten span elements that will
work as individual ripples I will later blend them to appear as a single element span is an inline element so let’s give
display:block that way it will accept width and height attributes also I need
to centre it along horizontal axis so the usual trick top 50% transform
translate zero minus 50% and position:absolute. This will work only if
its parent the button also has position property declared we want to increase the height of all
span elements whenever we hover over a button since span is its child we can
use this syntax. I will actually need 11 span elements so I need to add one more
I want the ripple effect to be even on both sides so 5 on the left,one in the
middle and 5 on the right. That will make our sixth span the middle element since we are using pure CSS I cannot
loop so I will have to manually set transition-delay and left position for
all 11 spans. This will create ripples coming from the centre of our button. I
will speed this part up a bit so you can always pause the video if you struggle
to keep up Now we need to make our button text
visible. I used P tag for this so let’s grab it. Let’s make it white, 12 pixels
and z-index of 10. This will not work yet as you can see, because z-index only works on positioned elements, so I’ll give it position:relative, that should
fix it transition of 0.5 seconds and gray text
color on hover Now the most important part that will
create the liquid appearance I will add few SVG filters directly to our HTML
markup and give it ID so I can point towards it with CSS. First filter will be
blur with a value of 10 then colour-matrix filter, this is quite
complex and I won’t be going into details how this works. All I will say it
gives us so many creative options and I will include a link in the video
description if you want to read the great explanation from someone who
really understands it And the last filter will be blend for
overlaying elements Now I use the filter on the main
container div and point towards our custom filter with its ID. I called it
goo so let’s do hashtag #goo. The effect is applied but it’s very subtle let’s
make it more pronounced with a tweak in colour matrix values. 60 will work but
let’s do 100 for a proper liquid field Now I want to make it bounce more so I
will add transition function to our transition property. You can go to the
website cubic-bezier.com and play with different settings. Sometimes you can use
cubic-bezier to replace @keyframes if you’re looking just for a simple pop or
bounce effect I see people using keyframes a lot but
it’s not as flexible as you cannot stop the animation in the middle. Also it just
skips, blinks and jerks instead of animating if you leave hover
state too early. You wouldn’t have this problem if you used cubic-bezier And that’s the effect, I will quickly
scroll over the code files if it isn’t working for you try to pause the
video and compare the code. Thank you very much for watching don’t forget to
like the video if you liked it, subscribe and click the bell icon. See you next
time !! 🙂 you

Comments

  1. Post
    Author
  2. Post
    Author
  3. Post
    Author
  4. Post
    Author
  5. Post
    Author
  6. Post
    Author
  7. Post
    Author
  8. Post
    Author
  9. Post
    Author

Leave a Reply

Your email address will not be published. Required fields are marked *