Create a clickable button using HTML/CSS for a Cargo website

I'll show you how to create a button from a text element with hover and active states. From this video you will learn some basics that you will be able to apply for further customisations.

Follow my channel to learn what cool effects can be created with this button.

Here is also my Instagram if you have any questions or just want to say hi:

[charlieperry]

all your tutorials are amazing - thank you!

[cocomoya]

Easy and fancy, thank you very much for the tutorial!

[AF-yypk]

thanks so much for posting these tutorials. so helpful + easy to follow!!

[stm.natural_selection]

Thanks for doing these tutorials. Greatly appreciated.

[NoodlesL]

Thank you for the video! Will be apply this to my website now.

[NinesFPS]

Saved my life. is there a way you can create a speech bubble with text above the button when hovering over the button?
Great Video :)

[bogdanpencea]

I'm still learning my way in Cargo and your tutorials are really helpfull. I have a very specific idea and can't find a way. Starting with the template "fruit bowl" I want to somehow hide a button under each apple so you can see it only after you put the apples in the bowl. How would you approach this?

[iamlyncs]

I'm obsessed with your videos! They are so helpful! How do I change text color with the hover CSS? I'm trying to also have an icon change as well upon hovering :)

[NoodlesL]

Hi so I just went through all steps and got my button but I was wondering if you could do a video showing us how to move the button, more specifically how to move it into a column between two other pieces of text?

[leabrunet-wong]

hello! when I add a link this turns my text blue, and all my colour edits on the text (hover and active) are overruled. They return when the link is removed. Any idea what I could do?

[estrelaconfusa]

Thanks for the tutorial, veyr helpful! I'm trying to put some buttons in my navbar but they stick to the border of the column instead of surrounding the text. Also I can't manage to put space between them because of the columns. (I have each button inside a column, don't know if that's a good idea.) What would be the best way to do it? Thank you!

[BevinPalmer]

how do you have your text in the middle of the screen without the "br"( Space) in the code log?

[DamianFrazzica-oz]

Hi, is there a way I can mix blend mode the text when hovering over? I want to change the white text to turn black with a white background. Hope this makes sense.

[leetomicable]

thanks a lot for your help. thanks to you, i made nice botton. But the last thing you mentioned, the area is clickable in addition to button text. I failed it. Do you know how to do it? I changed my html like this. but didn't work..

Original:
<div class="custom-btn"><a href="make-it-real-in-page" rel="history">VIEW</a></div>
<br>

New(according to you)
<a href="make-it-real-in-page" rel="history"><div
<br>

[lateefgarrett]

Hi! is there a way to make a button link out to an email? id like potential clients to click a button and a pre addressed email pops up

[moleculestudio]

how do I link a drop down menu from index tab to a project window? please help me out.

[melkjstudio]

Hello ! Thank you for your helpful videos. I am desperately trying to create a dropdown for simple text in one of my pages, do you have any tips on how to do that ?

[cy]

Hello, all my links have an underline, how do I remove it? Thank you for the video!