YouTube кнопка на HTML/CSS, 50K подписчиков!


Hi my name is Dmitry and you’re watching Senior Software Vlogger today we celebrate 50K subs And I decided to make a youtube button in pure CSS let’s get to it! First I need some HTML to apply CSS to I will add some divs for that * Link in description * and one more div for the white triangle I need to reset container I will be using flex for this ok, let’s add the button ok, the button is there but it is tiny, let’s make it bigger To center the button we need to stretch the container wrong attribute… now we have the button, let’s add the triangle Back in a day we used to use borders to make triangles though today I’ll be using clip-path ok, triangle is not quite triangle yet… To make it I’m using clip-path Just to cut off stuff from the image and I’m using polygon polygon is starting from the top left corner 0, 0 It goes into point 100%, 50% and back to 0, 100% there you go still not pretty enough let’s add border radius looks better I don’t like that red though Let’s replace it with gradient ok, better not into black though close, but there’s one more thing I’d like to implement Let’s do that inner shadow in the play button Let’s make it using ::after selector First let’s render it I’m using semi transparent shadow Ok, I see it though it’s not there where I want it let’s rotate it almost… almost there… Yes!I like what I’ve done link to the code in description it’s very straightforward I believe one can make it nicer and faster but I don’t write css all day that is my residual knowledge as you might know I’m a manager now and don’t write code very often Let’s pretend this CSS button is 50K youtube button 50K is so awesome! and I really appreciate your support I read all your comments and this gives me energy to move forward seeing my work doesn’t go into waste That’s it for today, thanks for watching, bye!

64 Comments

Add a Comment

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