Html - How can i do this background button

FelipeFurlaneto
April 19, 2024
135 views
1 vote
2 Answers

I need to make a background for my switch theme buttons but i’am stuck in this part

this is my code in the switch theme buttom part

<div class="themeContainer">
      <p>calc</p>
      <div>
        <span class="themeText">THEME</span>
        <span class="btnContainer">
          <button id="switchTheme1">1</button>
          <button id="switchTheme2">2</button>
          <button id="switchTheme3">3</button>
        </span>
      </div>
    </div>

First i made a <span> container so the other elements would not break line, but as a span is naturally displayed inline i can’t change it’s height.

After that i tried to change the btnContainer to display: inline-block; but it didn’t work

Now i’m a bit lost,i would appreciate if someone could help me in this matter.

.themeContainer {
   color: hsl(0, 0%, 100%);
   width: 535px; 
   height: 40px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.themeContainer p {
    font-size: 30px;
    margin-left: 10px;
}

.themeContainer .btnContainer {
    background-color:hsl(224, 36%, 15%);
    border-radius: 50%;
}

.themeContainer .themeText {
    font-size: 12px;
    margin-right: 10px;
}

.themeContainer button {
    color: hsl(0, 0%, 100%);
    background-color:hsl(224, 36%, 15%);
    font-size: 12px;
    max-width: 50px;
    max-height: 50px;
    width: 20px;
    height: 20px;
    margin: -1px;
    border-radius: 50%;
    border-style: none;
    cursor: pointer;
}

Tags: css html

Answers

I’d prefer you to use the radio-input to achieve this with some CSS-selectors.

.theme-switch {
  display: inline-block;
  position: relative;
  background-color: #eee;
  padding: 10px 20px;
  border-radius: 20px;
}

.theme-switch input[type="radio"] {
  display: none;
}

.theme-switch label {
  cursor: pointer;
  padding: 10px 20px;
  background-color: #eee;
  border-radius: 20px;
  color: #333;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / 3);
  height: 100%;
  background-color: #333;
  border-radius: 20px;
  transition: left 0.3s ease;
}

.theme-switch input[type="radio"]:nth-of-type(1):checked~.slider {
  left: 0%;
}

.theme-switch input[type="radio"]:nth-of-type(2):checked~.slider {
  left: calc(100% / 3);
}

.theme-switch input[type="radio"]:nth-of-type(3):checked~.slider {
  left: calc(100% / 3 * 2);
}

<div class="theme-switch">
  <input type="radio" id="lightTheme" name="theme" value="light">
  <label for="lightTheme">Light</label>

  <input type="radio" id="midDarkTheme" name="theme" value="mid-dark">
  <label for="midDarkTheme">Mid-Dark</label>

  <input type="radio" id="darkTheme" name="theme" value="dark">
  <label for="darkTheme">Dark</label>

  <div class="slider"></div>
</div>

You can make some final adjustments .. But I edited THIS CODEPEN to suit your needs.

.tw-toggle {
  background: #252D44;
  display: inline-block;
  padding: 2px 3px;
  border-radius: 20px;
  position: relative;
  border: 2px solid #95A5A6;
}

.tw-toggle label {
  text-align: center;
  font-family: sans-serif;
  display: inline-block;
  color: #95A5A6;
  position: relative;
  z-index: 2;
  margin: 0;
  text-align: center;
  padding: 2px 3px;
  font-size: 20px;
  margin: 5px
  /* cursor: pointer; */
}

.tw-toggle input {
  /* display: none; */
  position: absolute;
  z-index: 3;
  opacity: 0;
  cursor: pointer;
  height: 30px;
  width: 30px;
}

.tw-toggle span {
  height: 30px;
  width: 30px;
  line-height: 21px;
  border-radius: 50%;
  background: #fff;
  display: block;
  position: absolute;
  left: 15px;
  top: 2px;
  transition: all 0.3s ease-in-out;
}

.tw-toggle input[value="false"]:checked~span {
  background: rgb(249, 107, 89);
  left: 2px;
  top: 5px;
  color: #fff;
}

.tw-toggle input[value="true"]:checked~span {
  background: rgb(249, 107, 89);
  left: 64px;
  top: 5px;
  color: #fff;
}

.tw-toggle input[value="-1"]:checked~span {
  background: rgb(249, 107, 89);
  left: 33px;
  top: 5px;
  color: #fff;
}

.tw-toggle input[value="false"]:checked+label,
.tw-toggle input[value="true"]:checked+label {
  color: #fff;
}

.tw-toggle input[value="-1"]:checked+label {
  color: #fff;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="tw-toggle">
  <input type="radio" name="toggle" value="false">
  <label class="toggle toggle-yes">1</label>
  <input checked type="radio" name="toggle" value="-1">
  <label class="toggle toggle-yes">2</label>
  <input type="radio" name="toggle" value="true">
  <label class="toggle toggle-yes">3</label>
  <span></span>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How can i do this background button

Answers