CSS Button Group

Last Updated:

December 4, 2022

CSS group Buttons are a type of button created using HTML and CSS. They provide a quick and easy way to add basic styling to any web page or application. The buttons can be styled to look like a traditional button or they can have a custom style applied to them. They can also be used to trigger certain events or functions when clicked.

Group button HTML CSS

<span class="button-groups-1">
  <button type="button">Years</button>
  <button type="button">Months</button>
  <button type="button">Days</button>
</span>

.button-groups-1 {
  display: inline-flex;
  border-radius: 0.375rem;
}
.button-groups-1 [type="button"] {
  padding: 0.7rem 1.5rem;
  display: inline-flex;
  text-align: center;
  position: relative;
  cursor: pointer;
  font-size: 0.9rem;
  text-transform: none;
  border-width: 1px;
  border-color: rgb(209, 213, 219);
  color: rgb(55, 65, 81);
  background-color: rgba(255, 255, 255, 1);
  border-style: solid;
  margin-left: -1px;
}
.button-groups-1 [type="button"]:first-child {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
.button-groups-1 [type="button"]:last-child {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
.button-groups-1 [type="button"]:hover {
  background-color: rgb(247 247 247);
}
.button-groups-1 [type="button"]:focus {
  outline: none;
  z-index: 99;
  background-color: rgb(247 247 247);
  box-shadow: 0 0 0 1px rgb(99, 102, 241);
  border-color: rgb(99, 102, 241);
}

.button-groups-1 {
	display: inline-flex;
	border-radius: 0.375rem;
	[type="button"] {
		padding: 0.7rem 1.5rem;
		display: inline-flex;
		text-align: center;
		position: relative;
		cursor: pointer;
		font-size: 0.9rem;
		text-transform: none;
		border-width: 1px;
		border-color: rgb(209, 213, 219);
		color: rgb(55, 65, 81);
		background-color: rgba(255, 255, 255, 1);
		border-style: solid;
		margin-left: -1px;
		&:first-child {
			border-top-left-radius: 0.375rem;
			border-bottom-left-radius: 0.375rem;
		}
		&:last-child {
			border-top-right-radius: 0.375rem;
			border-bottom-right-radius: 0.375rem;
		}
		&:hover {
			background-color: rgb(247 247 247);
		}
		&:focus {
			outline: none;
			z-index: 99;
			background-color: rgb(247 247 247);
			box-shadow: 0 0 0 1px rgb(99, 102, 241);
			border-color: rgb(99, 102, 241);
		}
	}
}

Group button with arrow icon

<span class="button-groups-2">
  <button type="button">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd"
        d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
        clip-rule="evenodd" />
    </svg>
  </button>
  <button type="button">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd"
        d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
        clip-rule="evenodd" />
    </svg>
  </button>
</span>

.button-groups-2 {
  display: inline-flex;
  border-radius: 0.375rem;
}
.button-groups-2 [type="button"] {
  padding: 0.5rem;
  display: inline-flex;
  text-align: center;
  position: relative;
  cursor: pointer;
  font-size: 0.9rem;
  text-transform: none;
  border-width: 1px;
  border-color: rgb(209, 213, 219);
  color: rgb(55, 65, 81);
  background-color: rgba(255, 255, 255, 1);
  border-style: solid;
  margin-left: -1px;
}
.button-groups-2 [type="button"] svg {
  width: 22px;
  fill: #6b7280;
}
.button-groups-2 [type="button"]:first-child {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
.button-groups-2 [type="button"]:last-child {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
.button-groups-2 [type="button"]:hover {
  background-color: rgb(247 247 247);
}
.button-groups-2 [type="button"]:focus {
  outline: none;
  z-index: 99;
  background-color: rgb(247 247 247);
  box-shadow: 0 0 0 1px rgb(99, 102, 241);
  border-color: rgb(99, 102, 241);
}

.button-groups-2 {
	display: inline-flex;
	border-radius: 0.375rem;
	[type="button"] {
		padding: 0.5rem;
		display: inline-flex;
		text-align: center;
		position: relative;
		cursor: pointer;
		font-size: 0.9rem;
		text-transform: none;
		border-width: 1px;
		border-color: rgb(209, 213, 219);
		color: rgb(55, 65, 81);
		background-color: rgba(255, 255, 255, 1);
		border-style: solid;
		margin-left: -1px;
		svg {
			width: 22px;
			fill: #6b7280;
		}
		&:first-child {
			border-top-left-radius: 0.375rem;
			border-bottom-left-radius: 0.375rem;
		}
		&:last-child {
			border-top-right-radius: 0.375rem;
			border-bottom-right-radius: 0.375rem;
		}
		&:hover {
			background-color: rgb(247 247 247);
		}
		&:focus {
			outline: none;
			z-index: 99;
			background-color: rgb(247 247 247);
			box-shadow: 0 0 0 1px rgb(99, 102, 241);
			border-color: rgb(99, 102, 241);
		}
	}
}

Group button with text and icon

<span class="button-groups-3">
  <button type="button">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd"
        d="M10 1c-1.716 0-3.408.106-5.07.31C3.806 1.45 3 2.414 3 3.517V18.25a.75.75 0 001.075.676L10 16.082l5.925 2.844A.75.75 0 0017 18.25V3.517c0-1.103-.806-2.068-1.93-2.207A41.403 41.403 0 0010 1z"
        clip-rule="evenodd" />
    </svg>
    Bookmark
  </button>
  <button type="button">
    14k
  </button>
</span>

.button-groups-3 {
  display: inline-flex;
  border-radius: 0.375rem;
}
.button-groups-3 [type="button"] {
  padding: 0.5rem 1rem;
  display: inline-flex;
  text-align: center;
  position: relative;
  cursor: pointer;
  font-size: 0.9rem;
  text-transform: none;
  border-width: 1px;
  border-color: rgb(209, 213, 219);
  color: rgb(55, 65, 81);
  background-color: rgba(255, 255, 255, 1);
  border-style: solid;
  margin-left: -1px;
}
.button-groups-3 [type="button"] svg {
  width: 22px;
  fill: #6b7280;
  margin-right: 0.5rem;
}
.button-groups-3 [type="button"]:first-child {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
.button-groups-3 [type="button"]:last-child {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
.button-groups-3 [type="button"]:hover {
  background-color: rgb(247 247 247);
}
.button-groups-3 [type="button"]:focus {
  outline: none;
  z-index: 99;
  background-color: rgb(247 247 247);
  box-shadow: 0 0 0 1px rgb(99, 102, 241);
  border-color: rgb(99, 102, 241);
}

.button-groups-3 {
	display: inline-flex;
	border-radius: 0.375rem;
	[type="button"] {
		padding: 0.5rem 1rem;
		display: inline-flex;
		text-align: center;
		position: relative;
		cursor: pointer;
		font-size: 0.9rem;
		text-transform: none;
		border-width: 1px;
		border-color: rgb(209, 213, 219);
		color: rgb(55, 65, 81);
		background-color: rgba(255, 255, 255, 1);
		border-style: solid;
		margin-left: -1px;
		svg {
			width: 22px;
			fill: #6b7280;
			margin-right: 0.5rem;
		}
		&:first-child {
			border-top-left-radius: 0.375rem;
			border-bottom-left-radius: 0.375rem;
		}
		&:last-child {
			border-top-right-radius: 0.375rem;
			border-bottom-right-radius: 0.375rem;
		}
		&:hover {
			background-color: rgb(247 247 247);
		}
		&:focus {
			outline: none;
			z-index: 99;
			background-color: rgb(247 247 247);
			box-shadow: 0 0 0 1px rgb(99, 102, 241);
			border-color: rgb(99, 102, 241);
		}
	}
}

CSS Button with Icon

CSS Hamburger Buttons

CSS Button Group

Group button HTML CSS

Group button with arrow icon

Group button with text and icon

Related Snippets