I am trying to code this:

But I struggle with how to deal with different colors in borders and stuff. So far, I have in my html code:

.buttonfilter {
  color: #0065FC;
  background-color: #DEEBFF;
  height: 20px;
  width: 20px;
  padding: 5px;
  text-align: center;
  border-radius: 50%;
}

<div ><i ></i></div> Animaux autorisés

Rendering this:

Any idea how to keep the text aligned on line keeping the light blue circle and adding the grey border ?

CodePudding user response：

Here is an example to do this.

.wrapper {
  display: flex;
  align-items: center;
  border: 1px solid #d9d9d9;
  border-radius: 50px; /** circle width */
  width: fit-content;
}

.circle {
  border-radius: 50%;
  background-color: #DEEBFF;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.label {
  margin: 0 10px;
}

<div >
  <div >