Buttons With Awesome Hover Effects Using Only HTML & CSS
Вставка
- Опубліковано 27 сер 2024
- Code Source:
www.buymeacoff...
◘ Join our group in facebook : / 704904666369941
◘ Like our page : / darkcode0
◘ Paypal donation link : paypal.me/YBen...
◘ Become my patron : / darkcode
◘ Music Name : Julius Dreisig & Zeus X Crona - Invisible [NCS Release]
◘ Music Link : • Julius Dreisig & Zeus ...
this made me realize how powerful CSS is.
Search ONLINE TUTORIAL CSS on UA-cam
The first channel which will come go this it
You will be Stunted
This made me realize how powerful this channel is.
@@albertokoa3563 But why here?
Wish you to see valorant website and their buttons
also HTML HAHA
Now I like UA-cam recommendations due to this video 🔥🔥
Our IT teacher gave us a link to this video as an extra task! I love how beautiful and smooth the transition is. Thanks!
As a mechanical student I can say that the electrical energy is converted into mechanical energy🗿
These are the actual people whom I admire, straight to the point
underrated video
Great video, I think I will stick around your channel for more :) Oh and I know most of the things are very simple but it would be cool if you added text in description/video explaning purpose of certain things (for example the ::before part), because I had to look it up on internet to fully understand.
i will try
They are called Pseudo elements ::before and ::after Have a look at CSS3 and html 5
Wish you all the best
This is a beauty, well thought and brilliantly done Thanks a lot, but the music was a little bit too rough!
ua-cam.com/video/kiDGZEo-Skc/v-deo.html
@Simon's Muzika same bro
Seriously that damned music
for everyone whose screen is getting blue please add
position: relative;
overflow: hidden;
to your button's css
Thank you very much
I LUV YOU
Great channel for web designers he is choosing awesome songs keep going . I am subscribing right now.
creativity in your blood.. nice one 👌👌
This is SUPERB! 😎👍🏻
i tried to follow the steps but the text only changing but when I put the cursor on the border it doesnt. I'm using the (class="filter" ul
это просто восхитительно
it's just amazing!
ua-cam.com/video/kiDGZEo-Skc/v-deo.html
love from india @darkcode thanks
Greetings from Venezuela. They are very good. They have helped me a lot in programming.
thank you
Best UI channel i have come across and i saw you started using jquery as well so might be best in lot of things now ..love your videos
thank you so much to this video provider..I learn few things due to this video ..This is so much useful (left side coding and right side output )..thank you thank you more than thank you .....
thank u sir
love from pakistan
Dude this so amazing, thank you very much. Your code is work
I successfully did it, but I have a question, It worked for button tag but not for tag, in tag it overflows the area, why this happens?
add the display: inline-block or block in css
Great job with this video! Now I am starting to learn how to do CSS flawlessly! Subscribed!
really, meaningful and practical expert!! well done....👍
Nice job pal, thanks for the trial 👍
Html is just the skeleton of the body and css is soul flesh skin and beautiness 😍😍
mình là 1 sinh viên ở Việt Nam, cảm ơn bạn đã chia sẻ những trick như thế này, mình sẽ đăng kí để học hỏi
body
{
margin:0;
padding:0;
}
.sd
{
text-align: center;
margin-top: 360px;
}
.btn
{
border: 1px solid #3498db;
background: none;
padding: 10px 20px;
font-size: 20px;
font-family: "montserrat";
cursor: pointer;
margin: 10px;
transition: 0.8s;
position: relative;
overflow:hidden;
}
.btn1,.btn2{
color: #3498db;
}
.btn3,.btn4{
color: #fff;
}
.btn1:hover,.btn2:hover{
color: #fff;
}
.btn3:hover,.btn4:hover{
color: #3498db;
}
.btn::before{
content: "";
position: absolute;
left: 0;
width: 100%;
height: 0%;
background:#32a0a8;
z-index: -1;
transition: 0.8s;
}
.btn1::before,.btn3::before{
top: 0;
border-radius: 0 0 50% 50%;
}
.btn2::before,.btn4::before{
bottom: 0;
border-radius: 50% 50% 0 0 ;
}
.btn3::before,.btn4::before{
height: 180%;
}
.btn1:hover::before,.btn2:hover::before{
height: 180%;
}
.btn3:hover::before,.btn4:hover::before{
height: 0%;
}
Wanted to ask where u get your hex code for those nice colours
i didn't know atom was the best programming software for html ever
I use VS code lol
it isn't :)
Excellent button design
这个是真的酷，在学习前段时，我是用这个作者的源码，然后再加上自己的魔改，改出了许多的样式
this is actually really good tutorial! Thks!
Thank you very much this helps alot with my science assignment
U can just use rotate I think
Thanks!
unbelivable amazing work
can you just add written tutorials to your videos to explain every step it will be amazing 😃😃
yes i will try =)
@@DarkCodeOnline If you need help with that, if you use Discord my name is SenseOG#0444 otherwise email me at info@mc-exchange.club
very easy and helpful to learn for newbies, great job!
thank you. helped so much.!!!!!!
Great tutorial, works but I have some issues. The animation will go but you can't see the curve going down, and only the text disappears.
same
Muchas gracias, saludos desde Colombia
are you from colombia?
Cool....
Just bit by bit if u would explain that would make really awesome👍
This is actually amazing 😍
So simple yet so beautiful 👌
Which IDE are you using..if you can tell.. Btw I'm Grateful to UA-cam algo for such content.
Its so easy and extremely helpful ans creative for me
Thank u buddy😭🥰
Great video, worked first time
Awesome. Thank You
estou começando a programar agora, muito obrigado pelo seu conteúdo!
Como que tá o caminho da programação?
ua-cam.com/video/bTtzjaYPXMs/v-deo.html
Fantastic coding ideas. Nice bro
welcome
Thanks bro.....
pure magic
Amazing video! Keep them css tricks coming!
Thanks so much so helpful
I love your lecture.
Hey, first of all: Great video!!! but why don't I see the effect when i change the background color of the div?
OMG u a rlly good HTML webpage cretor
Hello, how did you set up to the right part of the "index.html Preview" screen?
install atom-html-preview in atom
DarkCode Thank you.
Thanks too
@@DarkCodeOnline Hi, could you please provide your source for learning and then mastering HTML5 and CSS3?
Thanks Dude.
this is good but how do u link the css with html cos i did exactly what u did but it isnt working when i do live preview :(
Could you bring in some Animation tutorial series🤔
great job, what kind of editor are you using?
Thank you for source code
This things create a big difference
so nice tnx for learning
this is INSANE tysm
Nice video! I think I'm getting A for digital technologies this term
ua-cam.com/video/bTtzjaYPXMs/v-deo.html
For everyone who is having trobule to link the HTML file to a CSS file you need to copy this code:
Such a good and impressive video because i want other button effect and I made it inside you code just simply modified your code and I made my button which I want thanks
Tqxs man for giving some knowledge but I tried u r code it did not work but I tried in another way..👍
Excellent.
it's amazing and beautiful. thanks!
How to get the "montserrat" font? It's not on Visual Studio code editor ..
you can get it, via import from google fonts
Thank u so much sir
When there was no padding and margin work in the body
So what was the need to give zero values?
what software are you using boya~
thank you for lana del rey at the beginning!!☆♡☆
That’s awesome dude !!!
Thanks for the video, it’s really helpful
ua-cam.com/video/bTtzjaYPXMs/v-deo.html
Thank you 🤗🤗 your video is very helpful 👍👍
Make your own website like harry (code with harry) and upload ideas for css and more.
Good job man some thing different I like it
love Dark code
awesome tutorial bro your the reason why lto wanna learn now web development and making web designs in HTML PHP CSS JS ................. keep it up bro and idk what happens whit my jquary but the other videos of you my jquary is broken or something how do i fix that do u know that but keep it up this nice videos
please send me your code
@@DarkCodeOnline i gonna send if i'm home and i hope i still got it but i think i deleted it :( if it is then i need gonna quit jquery and use css for some effects
Thanks Dude! it Worked!
Thanks dude, great tutorial.
Subscribed ;)
I copied everything and my screen got blue, I added "position: relative;" to ".btn" and it fixed the blue screen but the hover effect exceed the size of the buttons, I will keep trying to fix the problem, any suggestions?
same problem here
What is the ‘:before’ thing for?
Perfect👍
Congratulations. Excellent!!
hey bro, thanks for the vid, I'm doing a school project where I have to build a website and I want mine to really stand out so this helped towards it.
Man, you are great help and inspiration ! ;)
it worked thank you
i did'nt want to know how to make buttons with that hover i wanted to know how to resize my buttons properly.. so this video help a ton. Thank you so much!
In this video which you are using for its preview .
Please tell me....
Nice bro, thanks.
to good i use atom too!
super
I recommend you background black put and see
Very nice tutorial!
very well thankyou
Beautiful! Subscribed
Great ❤ but ... What is the name of program that you use ? , I am using visual studio
Awesome !😍👍