Ask coding questions

← Back to all posts
Button
brylakkacper (0)

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 (224) [earned 5 cycles]
View Answer
Commentshotnewtop
Kookiez (224)

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! :)

brylakkacper (0)

@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>
Kookiez (224)

@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

brylakkacper (0)

@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...

Kookiez (224)

@brylakkacper hmm can you let me see your project?

Kookiez (224)

@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>.

Coder100 (10809)
<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 :)

RayhanADev (905)

@Coder100 lol nice simple css my dude.

SUHASTADIPARTH1 (169)
   <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.

RYANTADIPARTHI (1767)

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.

FishballNooodle (111)

HTML
<a class="button" href="link.com">Button</a>


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

Wumi4 (288)

@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.

FishballNooodle (111)

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