When I've designed our company Homepage, we had from one to three buttons to present for each of our apps, depending the case. I wanted to avoid using separate buttons for aesthetic reasons because to me, a unique “capsule” look was more elegant and interesting to use. So I went for the so called “segmented Controls” solution. Most of the time, it's a simple horizontal button look made of multiple segments. Note that it could be vertical.

The Segmented Controls are nice to build menus or multiple buttons that visually works when next to each other.
No matter the number of elements you'll add to your group, the look you'll could design for the first, the last, and the in between elements will always apply without having to add any specific class on them.

Requirements

On the HTML side, it's fairly simple, just create a parent element that will contain all your segments.
(In my case .taz_sgmtGrp and .taz_sgmtBtn).

<div class="taz_sgmtGrp">
	<button class="taz_sgmtBtn">Action 1</button>
	<button class="taz_sgmtBtn">Action 2</button>
	<button class="taz_sgmtBtn">Action 3</button>
</div>
// Works the same with a list (ie. in a menu), or anything else.
<ul class="taz_sgmtGrp">
	<li class="taz_sgmtBtn"><a href="#">Action 1</a></li>
	<li class="taz_sgmtBtn"><a href="#">Action 2</a></li>
	<li class="taz_sgmtBtn"><a href="#">Action 3</a></li>
</ul>

On the CSS side, the best you know this language, the most you'll be able to play around.
Here, everything is fully styled using CSS, no image has been used.

Note

Check-out the CSS code of each style variants. Depending on what you want to achieve, you'll have to style only the buttons or both the buttons and their parent. Also, some designs will better work if a button never jump to next line because of a narrow window width.

See the Pen Segmented Controls by Édouard Puginier (@Tazintosh) on CodePen.light