Beautiful button animation and excellent tutorial -- THANK YOU!!! One question however, for actual implementation in a website, wouldn't be better to: (1) add a class to the button anchor tag (e.g., Button) and then (2) modify the javascript to target that class (e.g., const buttons = document.querySelectorAll('.ripple'); )?? I tried this and it seemed to work nicely.
The left side of coffee dispenser they made into a ripple wave deployment then falls back to botton eyes so with added water they made a gecko frog hammerhead shark as the froth with pit tenr cover to be drunk by me 😭 Dont count if i see it 😭
Hello, thanks for this tutorial, I try to change document.querySelectorAll('a') by document.getElementsByClassName("ripples_efectt") and do not work, there is a way to select not all ?? only the .ripples_efectt?? with javascritpt only? (not jquery)
I found a solution: var button = document.getElementsByClassName("ripples_efectt"); Array.from(button).forEach((btn) => { // Do stuff here }); Happy coding :D
I have a svg inside the button (fontAwesome icon) and the properties e.target.offsetX and e.target.offsetY are undefined when I click on the svg part, so the effect doesn't apply good on that part, any solution?
let x = e.clientX - e.target.offsetLeft; let y = e.clientY - e.target.offsetTop; -> u wrote "Let" and that didnt work it's "let" without capital letters
Please At least Make One! 1) How To Make A Collision/Hitting In JavaScript Like: when 2objs hit each other alert. //do something using if-else statement NO OBJECTS please. 2) Is Shuffling Or Maybe Matching [Shuffling] Like When You Want To Randomly Change Something Position Or Color Or Imgs. [Matching] Card Game Like When You Found 1Card Then When You Found 2card Score++ Something//do something Please I'm Willing About 6Months I Searched In Everywhere! Hope I Can Find The Solution For My Situation Here :) #RawçiGurg
i have the problem, that when i hit a child(bruh) of the button, it positions the ripples like 10 time away so you cant see them any suggestions on how to fix it? thx
Wrong selector, or wrong method to select elements. document.querySelectorAll() returns a collection, that have .forEach method. document.getElementsByTagName() return a collection, that don't have such. It needs to be transformed into array first
This! offsetLeft and offsetTop won't work if the offsetParent doesn't reach the window edges (as body, which was the offsetParent in this case did). In a more realistic layout with nested elements, getBoundingClientRect is the way to go.
Exactly what I wanted! Amazing! :D
I think you could use transform: scale() instead of width and height, only for performance issues... Btw, excellent video!
Irshad bhai u r genius person, Allah khoob kamyab krein apko...
Oh come on all videos i watch it I can't don't touch a like button on your video ❤️ truly i love you and your channel dude thank you 😍
Nice, very nice. I'm tricker Css but this is the first time know this trick
Tks!
I like your every videos before watching it.
Beautiful button animation and excellent tutorial -- THANK YOU!!!
One question however, for actual implementation in a website, wouldn't be better to:
(1) add a class to the button anchor tag (e.g., Button) and then
(2) modify the javascript to target that class (e.g., const buttons = document.querySelectorAll('.ripple'); )??
I tried this and it seemed to work nicely.
do you have to type ;)?? too?
You are a true genius sir 🙌
Awesome buttons 😍
0:47 end of the day (this is information for me)
सुपर Amazing 👌👌👌👍👍👍👍
I really needed it but was unable to search about it, thank you very much!!!
Four years ago, no like, no comment, four years alone...
Thanks you so much bro 😊😊
1 No. bro
Thank you so much! Simple steps!
the 0% and 100% in @keyframe animate arent working it stays white(i have the same color theme in vsc) please help
bhai aekdam jakkas
You are awsome 🔥🔥🔥🔥🔥🔥🔥🔥🔥
Thank you for video
Amazing sir❤️❤️❤️
You're the best!
Amazing bro
Thanks 🔥
@@OnlineTutorialsYT thanks bro
Excellent content homie! Thank you so much!
you are awesome💜🤩
Super cool!!!
Aka, the XRP effect... 😎
What a great tutorial
its so amazinggggg!!!
Nice work bro
Thanks
superb 👌
great work
can i do a blur transition between 2 texts with only css?
Yes...i'll also try to do this
@LNEN ID Check console for error. Change to document.body.appendChild(cur);
Is it possible to adjust to define this effect in just a few ids?
The left side of coffee dispenser they made into a ripple wave deployment then falls back to botton eyes so with added water they made a gecko frog hammerhead shark as the froth with pit tenr cover to be drunk by me 😭
Dont count if i see it 😭
😊😂 hammerhead shark which smashed the mjonir 😭
Hello, thanks for this tutorial, I try to change document.querySelectorAll('a') by document.getElementsByClassName("ripples_efectt") and do not work, there is a way to select not all ?? only the .ripples_efectt?? with javascritpt only? (not jquery)
I found a solution:
var button = document.getElementsByClassName("ripples_efectt");
Array.from(button).forEach((btn) => {
// Do stuff here
});
Happy coding :D
@@alfonzito3164 thank you
@@alfonzito3164 can you tell me how much time it will take to reach at this point in programming... I started learning css this week after html
@@alfonzito3164 this help to make it work
@@alfonzito3164 this help to make it work
Thank you verry much
That's an awesomee!
very good
Thank you very very very much =)))) You best!!!!
If the button is in container with absolute position is not working. Any suggestions?
Nice tutorial by the way 🤘
Awesome
exacly, really I see it in the Material-UI but can't figure how to do. you just help me, thanks!
Use transform.scale , to animations,
Your width and height will make low, CPU
This is so beatiul.
Alhamdulillah Thanks
Hello u do really nice work can u make voice onee with details explained
The bomb!
Cool!!!
Sweet - opacity will do the trick.
yes bro
I tried the same but it is popping only at Same place not where i click please help me in this
thanks pro bro
I have a svg inside the button (fontAwesome icon) and the properties e.target.offsetX and e.target.offsetY are undefined when I click on the svg part, so the effect doesn't apply good on that part, any solution?
you can add "pointer-events: none" css property to the content of the button
Can u do a circle pop in css plzz! Btw this was amazing
can you give me any example or explain it?
1:40 copies tag name 'a' from html :D
let x = e.clientX - e.target.offsetLeft;
let y = e.clientY - e.target.offsetTop;
-> u wrote "Let" and that didnt work it's "let" without capital letters
Thank you for writing this in the comment section. I was confused why my codes didn't work because I'm quite new to JS.
I realised that the "Let" in this video is actually "let" as its part of the font style.
Would I just write this vanilla JS inside my render method if using React's JSX? Or where do I put it
perfect
Nice. Do you know WAI-ARIA? Could you make some videos about it, please?
Which software u use for coding
When i change the # in the href tag to a real site it loads to fast to show the effect, can somebody help?
Please At least Make One!
1) How To Make A Collision/Hitting In JavaScript Like:
when 2objs hit each other alert. //do something using if-else statement NO OBJECTS please.
2) Is Shuffling Or Maybe Matching
[Shuffling] Like When You Want To Randomly Change Something Position Or Color Or Imgs.
[Matching] Card Game Like When You Found 1Card Then When You Found 2card Score++ Something//do something Please I'm Willing About 6Months I Searched In Everywhere!
Hope I Can Find The Solution For My Situation Here :)
#RawçiGurg
Can u make video on how can we use such css effects on our gui like qt,..
Can i make it on hover?
nice it's get good UIUX
What is the different between block amd inline block
block - takes full with of its container
Bro, can you make the login page go to home page. I wantcto know how to make it
alreday created watch these ua-cam.com/video/uGx9J4zRf2U/v-deo.html and ua-cam.com/video/E9mnQFHYrHM/v-deo.html
an error this code cannot show animation when i click it
so why?
same, copied everything perfect sill i am facing probs
same here no animation
I don't get any ripple effect when i click the button. Can you help me ?
same with me
Wouldn't it be easier to use pseudo elements instead?
but it won't work if the user click more than 1 time
i have the problem, that when i hit a child(bruh) of the button, it positions the ripples like 10 time away so you cant see them any suggestions on how to fix it? thx
found a fix just put in the childs of the button a pointer-event: none; in the css file
Bro when you will upload image tornado tutorial?
Coming week
Which software are you using to write code
Sublimetext
Which version are u using
" Uncaught TypeError: button.forEach is not a function " ? My code not working, I'm having this problem.
Wrong selector, or wrong method to select elements. document.querySelectorAll() returns a collection, that have .forEach method. document.getElementsByTagName() return a collection, that don't have such. It needs to be transformed into array first
1st :D
overflow: none; is not working for me, anyone know a fix for this or why it might happen?
There is no such value for "overflow" property. Overflow may be hidden, visible, scroll, auto
Does anyone know what could be the problem to the Javascript not working.
wow
Can i download that
Hey dude, can you give me a link to that honeycomb hover effect video?
Awesome! I just wished you had used Jquery instead of JavaScript, as I’m allergic to the latter. ;)
Next time!
i could used this design in my website.
use getBoundingClientRect instead of offsetLeft and offsetTop .
This! offsetLeft and offsetTop won't work if the offsetParent doesn't reach the window edges (as body, which was the offsetParent in this case did). In a more realistic layout with nested elements, getBoundingClientRect is the way to go.
Супер!!!
i use Vscode editor i writte the same code but nothing happen anyone know why?
do you know canvas?
little bit
do you know how to install canvas image?
i watch a lot of video and i don't know how to install it
सर में चाहता हूं की नियोमोर्फिसम में किसी बटन पर क्लिक करू तो उस बटन का कलर बदल जाए। ये कैसे होगा।
commenting for the algorithm
Now we use materialize
Uncaught TypeError: Cannot read property 'forEach' of null
In that case I guess you are selecting the wrong element.
why doesn't it works with Bootstrap?
Very simple, i like. But what if my button bigger than 500px?
you can change width and height.
My dear brother, I am posting videos on my Facebook page, mentioning the source, will you allow me to post?
can I get the code somewhere?
All Source Code : www.patreon.com/onlinetutorials
man source code??
is there a source code of this? thanks huhu
Super-puper
In my case
overflow:hidden;
Is not working
It depends on where you put it in your code. I put it where I have the style properties for the button itself.
could you give the source code??
please attach the code
not working