CSS Badge with Button

Last Updated:

CSS badge with button is a small images or icons that can be used to visually represent a feature or accomplishment on a website. CSS badges are often used to indicate awards, certifications, and other achievements.

Badge with button HTML CSS

SmallLarge
<span class="badge-button purple">
  Small
  <button type="button">
    <svg class="purple" stroke="currentColor" fill="none" viewBox="0 0 8 8">
      <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
    </svg>
  </button>
</span>
<span class="large-badge-button purple">
  Large
  <button type="button">
    <svg class="purple" stroke="currentColor" fill="none" viewBox="0 0 8 8">
      <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
    </svg>
  </button>
</span>
.badge-button {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  padding: 0.125rem 0.125rem 0.125rem 0.625rem;
  border-radius: 9999px;
  color: #1f2937;
  background-color: #f3f4f6;
}
.badge-button svg {
  width: 10px;
  height: 10px;
  background-color: transparent;
}
.badge-button [type="button"] {
  width: 16px;
  height: 16px;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  margin-left: 0.125rem;
  background-color: transparent;
  cursor: pointer;
  border: none;
  margin-left: 0.375rem;
  padding: 0;
}
.badge-button [type="button"]:hover {
  background-color: #e9cefd;
}
.badge-button [type="button"]:focus {
  background-color: #d6a7fd;
}
.large-badge-button {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  padding: 0.125rem 0.125rem 0.125rem 0.75rem;
  border-radius: 9999px;
  color: #1f2937;
  background-color: #f3f4f6;
}
.large-badge-button svg {
  width: 10px;
  height: 10px;
  background-color: transparent;
}
.large-badge-button [type="button"] {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  margin-left: 0.125rem;
  background-color: transparent;
  cursor: pointer;
  border: none;
  margin-left: 0.375rem;
  padding: 0;
}
.large-badge-button [type="button"]:hover {
  background-color: #e9cefd;
}
.large-badge-button [type="button"]:focus {
  background-color: #d6a7fd;
}
.purple {
  color: #6b21a8;
  background-color: #f3e8ff;
}
.badge-button {
	display: inline-flex;
	align-items: center;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 500;
	padding: 0.125rem 0.125rem 0.125rem 0.625rem;
	border-radius: 9999px;
	color: #1f2937;
	background-color: #f3f4f6;
	svg {
		width: 10px;
		height: 10px;
		background-color: transparent;
	}
	[type="button"] {
		width: 16px;
		height: 16px;
		display: inline-flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		border-radius: 9999px;
		margin-left: 0.125rem;
		background-color: transparent;
		cursor: pointer;
		border: none;
		margin-left: 0.375rem;
		padding: 0;
		&:hover {
			background-color: #e9cefd;
		}
		&:focus {
			background-color: #d6a7fd;
		}
	}
}
.large-badge-button {
	display: inline-flex;
	align-items: center;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	padding: 0.125rem 0.125rem 0.125rem 0.75rem;
	border-radius: 9999px;
	color: #1f2937;
	background-color: #f3f4f6;
	svg {
		width: 10px;
		height: 10px;
		background-color: transparent;
	}
	[type="button"] {
		width: 1rem;
		height: 1rem;
		display: inline-flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		border-radius: 9999px;
		margin-left: 0.125rem;
		background-color: transparent;
		cursor: pointer;
		border: none;
		margin-left: 0.375rem;
		padding: 0;
		&:hover {
			background-color: #e9cefd;
		}
		&:focus {
			background-color: #d6a7fd;
		}
	}
}
.purple {
	color: #6b21a8;
	background-color: #f3e8ff;
}