Buttons can be placed in a variety of positions depending upon the layout, need, or context of the action. Here’s a few examples of how they are commonly used:
Follow the leader
The rule of thumb for button placement is to use the same alignment as the content that precedes the button. Content blocks like jumbotrons, page headers, or really important stuff often times are set off with bigger type that’s center justified. So in this case, a button is center aligned...
Here’s an example of the buttons following a left justified group of content…
And on occasion (namely Fridays) we get saucey and right justify a button. Actually this occurs when buttons are combined with other block elements like page headers or input fields, minimizing vertical space.
This way or that?
Now and again you get to a screen that’s like a fork in the road. Do you join Roberto on the road less traveled? Who knows. But one way you can help people realize it’s a significant decision is to let the button span the entire container with subsequent buttons stacking below it. This approach should be limited to mobile layouts as buttons will become egregiously wide on desktop. Let’s keep stick to roads not superhighways.
Burrito supreme
Some interactions can’t be conducted in one view so we need to create a multi-step process. For instance, if you start a small group, there’s lots of details you need to provide like location, who’s invited, when it meets, etc. So in this case, we right justify the action that moves forward in the process and left justify the action that moves us back a step. And if you need a cancel, float that sucker in the middle like so...
