Skip to content
← Back to Community
Button
Profile icon
brylakkacper

I don't know how to make a button. No, not something like this:

<a href="link.com">Button</a>

I mean a real button. With frames, and everything like that.
Any Ideas?

I would be thankfull

Answered by Kookiez [earned 5 cycles]
View Answer
Voters
Profile icon
brylakkacper
Comments
hotnewtop
Profile icon
Kookiez

well, to make a simple button, it's like this:

<button>I am a Button!</button>

to make it look better, do this in the html:

<button class = 'button'>I am a Button!</button>

and this is the css:

.button { color: lightblue; background-color: red; padding: 15px 20px; border: none; }

change a few of these around and learn a bit of css and your buttons will look really good! :)

Profile icon
brylakkacper

@Kookiez I am using html, so you helped me out a lot. But I have a question. How to add a link into that button?

That'd help me out a lot

Edit: I don't mean something like that:

<button><a href="link">SampleText</a></button>
Profile icon
Kookiez

@brylakkacper well, the <a></a> tag is the easiest, but if you want another one, which includes js:

in the html, write:

<button onclick = 'newLink();'>Click Me!</button>

and in the js, write:

function newLink() { window.location.href = 'link'; }

NOTE: When you run the code, open it in a new tab for best results

Profile icon
brylakkacper

@Kookiez So the button looks really cool, but... I don't know if it's just me, but it doesn't work now. Maybe because I don't know absolutely nothing about js...

Profile icon
Kookiez

@brylakkacper hmm can you let me see your project?

Profile icon
brylakkacper
Profile icon
Kookiez

@brylakkacper oh ok I know! here on line 23 in BobuxMaker.html,

<button onclick = 'newLink()' align=center> Click to begin</button>

Well, newLink() should be newLink(); - there's a semicolon you have to put. And, to have better effect, don't put align=center. It should be align = "center". Or, just delete all of those align = center and put align = "center" in the <body>.

Profile icon
Coder100
<a href="[whatever]"><button>[your-text]</button></a>

Replace [whatever] to your URL, and [your-text] to your button text.

To make it look better, you can use css:

button { border: 4px outset black; } button:active { border: 4px inset black; }

I really like this feature :)

Profile icon
RayhanADev

@Coder100 lol nice simple css my dude.

Profile icon
SUHASTADIPARTH1
<button type="button">Name Of Your Button</button> <a href="#">Link name here</a>
button { color: white; background-color: black; border: none; padding: 10px 20px; transition: 0.5s; } button:hover { background-color: white; color: black; }

If you want to style the button, here are a few basic styles for you.

Profile icon
RYANTADIPARTHI

Do this:


<button>Button</button>

Or if you want more styling, then put this

<button class="button">Button</button>
button { color: blue; background-color: red; }

That's styling the button.

Profile icon
FishballNooodle

HTML
Button


CSS
a.button{
text-decorations: None;
border-width: 20px;
border-color: Black;
border-radius: 10px;
}

Profile icon
Wumi4

@FishballNooodle That's not even a button xD

Just use <button></button> tag. That's it!

You can search any other things later about this tag by searching button tag html.

Profile icon
FishballNooodle

@Wumi4
A normal button looks ugly.
I use an A tag