I would like to know how to place 2 buttons horizontally with space between them.
Any simple html and css code snippet someone could share ?
I couldn't find any good example
There are multiple ways, here is a very simple example with floats:
https://jsfiddle.net/dbb8xk38/
<button class="button-1">Example</button>
<button class="button-2">Example 2</button>
button{
float: left;
}
.button-2{
margin-left: 15px;
}
I would strongly encourage you to go w3school CSS tutorial, it will teach you amazing things.
http://www.w3schools.com/css/default.asp
Note: In case with buttons you don't even have to float them, by default they will come next to each other. But with elements such as a div, you would need to float.
Depends on what you're trying to achieve with the rest of the page, in terms of layout and what styles you wish to apply to your other buttons and other HTML controls.
http://www.w3schools.com/css/css_margin.asp
HTML:
<button>Button 1</button>
<button>Button 2</button>
CSS:
button {
margin-left:20px;
}
The HTML/CSS above will place a 20 pixel margin at the left of EVERY button. If you simply need to apply it to one button, then you'll need a separate class or some inline style to do that.
E.g.
CSS:
.buttonSpaced {
margin-left:20px;
}
And then just apply this style to the 2nd button only.
HTML:
<button class="buttonSpaced">Button 2</button>
Or you could just do it inline, if it's not likely to be used again...
<button style="margin-left:20px;">Button 2</button>
Related
I'm trying to create a Navigation field for my website, and I would like my buttons to be underneath each other with a white line in between. I have managed to get this part working by adding two line breaks next to the button, as seen here:
<button id = "next" onclick="next()">
Volgende
</button><br><br>
I'm wondering if it's possible to have them show up like this, but if I hide the button, have the other buttons jump up, so they fill the gap and jump back down when the button becomes visible again.
Thanks in advance!
Don't use line breaks for layout. That's a misuse of their purpose, which is to break text.
Just put your buttons in block-level (or inline-block level) containers, like divs. Obviously you'd hide and show the containers, not the buttons.
.button-container:not(:first-child) {
border-top: 1px solid red;
padding-top: 4px;
margin-top: 4px;
}
<div id="next-btn-container" class="button-container">
<button id="next" onclick="next()">Volgende</button>
</div>
<div id="other-btn-container" class="button-container">
<button id="other" onclick="next()">Volgende</button>
</div>
<div id="another-btn-container" class="button-container">
<button id="another" onclick="next()">Volgende</button>
</div>
<br> is not a good practice for cross-browser perspective, kindly use the standard way by using margin and display:block property of css.
So your html will be like:
<button class="mb-20px d-block" id = "next" onclick="next()">
Volgende
</button>
And add below line in your css
.mb-20px { margin-bottom: 20px; }
.d-block { display: block; }
I have found how to make it work.
Instead of using
document.getElementById("button").style.visibility = 'hidden'
I have now used
document.getElementById("button").style.display = 'none'
This makes the buttons fill the gaps when they're hidden.
I see some of the frameworks doing this but it seems to me it is the default. Has anyone any experience with anything other than the default or do they know why it is specified?
Most frameworks let you set their button classes not to button elements only, but other elements like a, div, span etc.
The below illustrates it by using bootstrap btn class name (1)
JS Fiddle
.btn{ margin:5px; }
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="btn btn-primary">This is a div</div><hr>
<a class="btn btn-success"> this is an anchor</a><hr>
<button class="btn btn-warning">Finally, a button</button>
(1) Same thing for Foundation button class and Pure.css pure-button class.
Each element in HTML has a default display mode like "block", "inline", etc. For example, the "div" display is "block", and the "span" display is "inline".
I need a display mode like the "button" elements.
It's more like the "inline" because you can put some of them in one line, but unlike the "inline" they can have width property.
OK, enough, let's back to my question.
Which display mode do HTML buttons have?
A button is by default an inline-block, so multiple buttons without a line break or some will be displayed next to each other:
<button>button 1</button>
<button>button 2</button>
If you want them to be under each other, you could display them as block:
button {
display: block;
}
<button>button 1</button>
<button>button 2</button>
And by changing button's display value to block, you could easily center it like so:
(suppose it has a class of btn)
.btn{
display: block;
margin: 2em auto;
}
The default display property of HTML buttons is inline-block.
You can change it using CSS or the style attribute.
Excuse this basic question, but I couldn't find an answer that fit. I have this code in a view:
<div>
<h4> Irrelevant MVC code... </h4>
<button type="button" class="btn btn-success">Accept</button>
<button type="button" class="btn btn-warning">Deny</button>
</div>
I would like the 2 buttons to appear next to the heading, not below. How would I do this please?
Just add css property display: inline-block; to yours elements.
It's a method to display an element as a block while flowing it.
By default, your buttons are already inline, so you just need to display your h4 inline :
h4{
display: inline-block;
}
Try this :-
Because it is a block element, so your buttons come down.
h4{
display:inline-block;
}
I am trying to make a button for a message system to show an orange dot if there's a new message. However, i can't quite get it working. Is it possible?
Here's the button
<input type="button" value="Messages •" />
And the button on jsFiddle if anyone feels like trying out :-)
http://jsfiddle.net/ePA47/1/
Use a button element instead.
<button type="button">
Messages <span style="color: orange;">•</span>
</button>
Of course, don't add your stylings inline. I just did for this example's sake.
You could also add a class to the button such as new-messages and then do...
button.new-messages:after {
content: "•";
color: orange;
}
Just keep in mind the latter won't work in older IEs.
Use <button> instead of <input> since it has child elements which you can style.
To add an orange dot to your button, I would recommend using a background-image. This will give you the ability to design the dot however you wish, and not be constrained by font types.
It's also better for accessibility if the orange dot is added as a background image, as this is not content.
<input type="button" value="Messages" class="newmessage" />
.newmessage
{
background-image:url('http://img859.imageshack.us/img859/9611/orangedot.jpg');
background-repeat:no-repeat;
background-position:right center;
padding:5px;
padding-right:25px;
}
See Demo: http://jsfiddle.net/ePA47/3/
As per the question heading, the following will help to add multiple styles in a single style tag
<button type="button" style= "margin-top : 20px; border-radius: 15px"
class="btn btn-primary">View Full Profile
</button>