Skip to content
← Back to Community
How to decorate your button, simple steps.
Profile icon
staps

HTML Website Decorative Buttons. Making a simple button with the old same code:

A header Example

Well this guide teaches you how to make decorative buttons.

A header First we make the HTML pretty simply we just make a normal button(Adding a Href if you want it to be linked to another webpage)and we add a DIV in the button linking it to the CSS.

https://www.w3schools.com/ Thanks to this website it helps me make websites(Not Sponsored)

Screenshot from 2020-07-09 20-28-39

A header Second) Add the CSS code, you can copy and paste and change the color. Not much to explain here but you can adjust these small details like the cursor.

Screenshot from 2020-07-09 20-25-43

This is how it should look:

Screenshot from 2020-07-09 19-51-32

Voters
Profile icon
mkhoi
Profile icon
awesome10
Profile icon
DigitCommander
Profile icon
avoto
Profile icon
k9chelsea2
Profile icon
staps
Comments
hotnewtop
Profile icon
Funkus

sorry to disappoint you, but it doesn't look like that :(

Profile icon
staps

@Funkus oops, just saw you now, what are your concerns; should I be more clear?

Profile icon
awesome10

:O you worked for MINECRAFT?!?! @Puffy2017

Profile icon
HahaYes

@Puffy2017 WHOA you worked for minecraft? Big respect

Profile icon
awesome10

@Puffy2017 cool! 👏

Profile icon
DigitCommander

NOICE

Profile icon
Highwayman

Noice

Profile icon
staps

@Highwayman Thanks, i was late to the party ;( So I could not see your message

Profile icon
Highwayman

@Puffy2017 s’ok.

Profile icon
staps

ty :)))))))) shaking

Profile icon
Minilofe

Thanks for the tutorial! Is this the first one?

Profile icon
staps

@Minikeyboard yes thanks for the response.

Profile icon
k9chelsea2

yeh I kinda use that script

Profile icon
staps

@NDLFOREVER OOF, anyways, if you want me to be more clear on some parts(As this is my first post) do tell me.

Profile icon
k9chelsea2

I mean maybe explain what each thing does or give a link to w3schools (for example) tutorial for a more in depth example but overall pretty kool

Profile icon
staps

@NDLFOREVER Thanks for the beautiful review. I will explain it in my own words describing what each stage does in the tutorial, but as always enjoy your day.

Profile icon
k9chelsea2

ok cool :3

Profile icon
staps

@NDLFOREVER thanks alot. :'

Profile icon
staps

@NDLFOREVER may you upvote my project please

Profile icon
k9chelsea2

hmmms…

Profile icon
k9chelsea2

only because I have the perfect amount of upvotes I will lmao