Thank you! The effect will work the same regardless of the shape or size-whether it’s a square, rectangle, circle, or with rounded corners, it won't matter.
Another banger! 🎉 Could you do the ripple effect next? I've watched a few tutorials on it, but none align as closely with how the Material Design team defines it. I guess we could use a radial gradient?
I'm having a display issue trying to implement this on codepen. I'm wondering if it has something to do with not using bootstrap. I initially thought it was because I was using a lower border radius for less circular icon borders, but even at 50% it's still doing it. The hover effect is only showing at the top and bottom of the icons and I have the same exact code as shown here. My theory that there's some extra styling via bootstrap I'm missing is that for example, I have to add text-decoration: none to get rid of the underlines whereas you don't. Anyone else having this issue? UPDATE: I fixed it by adding "position: relative;" and "z-index: 0" to the container div's (in this case "social") styles. Apparently it was sitting above the a tags and covering up the hover effect horizontally.
100% inspired to use one of the effects somewhere as a beautiful detail on the nav or footer
Awesome, I am sure you will find a perfect spot for them.
amazing, thank you!!
Thank you! Glad you liked it!
Awesome!
Thank you!
Fantastic tutorial!
Thank you! Glad you liked it.
@@OptimisticWeb Your content is always great to watch and teaches so much! I appreciate what you do!
Appreciate your support!
Excellent as always, thanks for your great work.
Thank you, appreciate your support!
awesome thanks alot
You're welcome!
*Good* man
Thank you!
Hey! I like it)) Interestingly enough, if anchors have a square form with slightly rounded corners, what would it look like?
Thank you! The effect will work the same regardless of the shape or size-whether it’s a square, rectangle, circle, or with rounded corners, it won't matter.
Another banger! 🎉
Could you do the ripple effect next? I've watched a few tutorials on it, but none align as closely with how the Material Design team defines it. I guess we could use a radial gradient?
Thank you! Exactly like the material design will require some JavaScript.
How you do voice over with ai can u tell me it is so accurate
I'm having a display issue trying to implement this on codepen. I'm wondering if it has something to do with not using bootstrap. I initially thought it was because I was using a lower border radius for less circular icon borders, but even at 50% it's still doing it. The hover effect is only showing at the top and bottom of the icons and I have the same exact code as shown here. My theory that there's some extra styling via bootstrap I'm missing is that for example, I have to add text-decoration: none to get rid of the underlines whereas you don't. Anyone else having this issue?
UPDATE: I fixed it by adding "position: relative;" and "z-index: 0" to the container div's (in this case "social") styles. Apparently it was sitting above the a tags and covering up the hover effect horizontally.
Glad it worked out for you! You can also compare the code with my CodePen shared in the description. Thanks for watching!