Buttons With Awesome Hover Effects Using Only HTML & CSS
ฝัง
- เผยแพร่เมื่อ 11 ต.ค. 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 ...
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🗿
Now I like TH-cam recommendations due to this video 🔥🔥
this made me realize how powerful CSS is.
Search ONLINE TUTORIAL CSS on TH-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
This is a beauty, well thought and brilliantly done Thanks a lot, but the music was a little bit too rough!
th-cam.com/video/kiDGZEo-Skc/w-d-xo.html
@Simon's Muzika same bro
Seriously that damned music
These are the actual people whom I admire, straight to the point
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
underrated video
love from india @darkcode thanks
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
creativity in your blood.. nice one 👌👌
Great channel for web designers he is choosing awesome songs keep going . I am subscribing right now.
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
This is SUPERB! 😎👍🏻
Greetings from Venezuela. They are very good. They have helped me a lot in programming.
thank you
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 .....
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
Great job with this video! Now I am starting to learn how to do CSS flawlessly! Subscribed!
это просто восхитительно
it's just amazing!
th-cam.com/video/kiDGZEo-Skc/w-d-xo.html
this is actually really good tutorial! Thks!
Excellent button design
Thank you very much this helps alot with my science assignment
unbelivable amazing work
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
Dude this so amazing, thank you very much. Your code is work
really, meaningful and practical expert!! well done....👍
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%;
}
I love your lecture.
very easy and helpful to learn for newbies, great job!
Nice job pal, thanks for the trial 👍
Gooood thing i am in- viiiiiiiiii- Sible..
Wanted to ask where u get your hex code for those nice colours
thank u sir
love from pakistan
Great video, worked first time
this is INSANE tysm
Html is just the skeleton of the body and css is soul flesh skin and beautiness 😍😍
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
这个是真的酷，在学习前段时，我是用这个作者的源码，然后再加上自己的魔改，改出了许多的样式
Thanks!
Muchas gracias, saludos desde Colombia
are you from colombia?
pure magic
Could you bring in some Animation tutorial series🤔
Awesome. Thank You
estou começando a programar agora, muito obrigado pelo seu conteúdo!
Como que tá o caminho da programação?
th-cam.com/video/bTtzjaYPXMs/w-d-xo.html
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
Hey, first of all: Great video!!! but why don't I see the effect when i change the background color of the div?
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.
Its so easy and extremely helpful ans creative for me
Thank u buddy😭🥰
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 :(
Excellent.
thank you. helped so much.!!!!!!
OMG u a rlly good HTML webpage cretor
love Dark 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
Thanks bro.....
Thanks so much so helpful
i didn't know atom was the best programming software for html ever
I use VS code lol
it isn't :)
Thanks Dude! it Worked!
Perfect👍
Which IDE are you using..if you can tell.. Btw I'm Grateful to TH-cam algo for such content.
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
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
THANK YOU SOOOOOOO MUCH
it's amazing and beautiful. thanks!
Amazing video! Keep them css tricks coming!
For everyone who is having trobule to link the HTML file to a CSS file you need to copy this code:
Fantastic coding ideas. Nice bro
welcome
U can just use rotate I think
Thank you for source code
great job, what kind of editor are you using?
Thank you 🤗🤗 your video is very helpful 👍👍
Thank you.
Awesome !😍👍
This is actually amazing 😍
So simple yet so beautiful 👌
Thank u so much sir
it's magical bro
Cool....
Just bit by bit if u would explain that would make really awesome👍
so nice tnx for learning
Which software did you use to create
Nice video! I think I'm getting A for digital technologies this term
th-cam.com/video/bTtzjaYPXMs/w-d-xo.html
Very nice tutorial!
which editor you are using??
what software are you using boya~
Good job man some thing different I like it
Cool! Thank you!
hello. you are awesome! thanks for this. just one thing, font-family doesn't work for me. what do you think is missing?
Thank you
it worked thank you
This things create a big difference
Congratulations. Excellent!!
thank you!
Your awesome! Can you make a tutorial on css key frame animations?that would be awesome!
This is amazing
Good job.
Great ❤ but ... What is the name of program that you use ? , I am using visual studio
Thank you 💗💗💗💗
super
Nice bro, thanks.
Thanks dude, great tutorial.
Subscribed ;)
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!
Nice stuff! Can you please explain why the value of 180%? Tried to figure it out but I'm out of ideas.