Дублирование кнопки div в CSS

Question

Я работаю над веб-сайтом и чувствую, что эта функциональная кнопка прекрасно подойдет для него, но после того, как я выясню функции, которые мне нужны.

У меня не получается создать рядом с ней еще одну такую же кнопку. На самом деле, мне нужно шесть из них, включая это. даже если я создаю кнопку, она ничего не показывает, кроме образца текста, я имею в виду, что она не показывает функции.

**Мне нужна помощь, чтобы точно воспроизвести кнопку div CSS, которую я создал, с теми же функциями.

Пожалуйста, найдите код ниже.

<style>
#myDIV .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
</style>
</head>
<body>

<span>Choose Your Product: </span>

<button id='btn1' type="button" onclick="function1()">Product 1</option></button>

<div id="myDIV">
<h4>Variable 1
</h2>

<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
  <option value="812"></option>
</label>

<h4>Variable 2
</h2>

<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
  <option value="812"></option>
</label>

<h4>Variable 3
</h2>

<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
  <option value="812"></option>
</label>

<h4>Variable 4
</h2>

<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
  <option value="812"></option>
</label>

<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}
</style>
<body>

<h1>Personalize</h1>
<label class="container">Nope
  <input type="radio" checked="checked" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Type 1
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Type 2
  <input type="radio" name="radio">
  <span class="checkmark"></span>

</label>

</body>
</html>

<script>
function function1() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

</script>

</body>
</html>

  <style>
    #myDIV .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
    }
    .switch input { 
      opacity: 0;
      width: 0;
      height: 0;
    }
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;
    }
    .slider:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
    }
    input:checked + .slider {
      background-color: #2196F3;
    }
    input:focus + .slider {
      box-shadow: 0 0 1px #2196F3;
    }
    input:checked + .slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
    }
    /* Rounded sliders */
    .slider.round {
      border-radius: 34px;
    }
    .slider.round:before {
      border-radius: 50%;
    }
    </style>
    </head>
    <body>
    <span>Choose Your Product: </span>
    <button id='btn1' type="button" onclick="function1()">Product 1</option></button>
    <div id="myDIV">
    <h4>Variable 1
    </h2>
    <label class="switch">
      <input type="checkbox">
      <span class="slider round"></span>
      <option value="812"></option>
    </label>
    <h4>Variable 2
    </h2>
    <label class="switch">
      <input type="checkbox">
      <span class="slider round"></span>
      <option value="812"></option>
    </label>
    <h4>Variable 3
    </h2>
    <label class="switch">
      <input type="checkbox">
      <span class="slider round"></span>
      <option value="812"></option>
    </label>
    <h4>Variable 4
    </h2>
    <label class="switch">
      <input type="checkbox">
      <span class="slider round"></span>
      <option value="812"></option>
    </label>
    <!DOCTYPE html>
    <html>
    <style>
    /* The container */
    .container {
      display: block;
      position: relative;
      padding-left: 35px;
      margin-bottom: 12px;
      cursor: pointer;
      font-size: 22px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    /* Hide the browser's default radio button */
    .container input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
    }
    /* Create a custom radio button */
    .checkmark {
      position: absolute;
      top: 0;
      left: 0;
      height: 25px;
      width: 25px;
      background-color: #eee;
      border-radius: 50%;
    }
    /* On mouse-over, add a grey background color */
    .container:hover input ~ .checkmark {
      background-color: #ccc;
    }
    /* When the radio button is checked, add a blue background */
    .container input:checked ~ .checkmark {
      background-color: #2196F3;
    }
    /* Create the indicator (the dot/circle - hidden when not checked) */
    .checkmark:after {
      content: "";
      position: absolute;
      display: none;
    }
    /* Show the indicator (dot/circle) when checked */
    .container input:checked ~ .checkmark:after {
      display: block;
    }
    /* Style the indicator (dot/circle) */
    .container .checkmark:after {
        top: 9px;
        left: 9px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: white;
    }
    </style>
    <body>
    <h1>Personalize</h1>
    <label class="container">Nope
      <input type="radio" checked="checked" name="radio">
      <span class="checkmark"></span>
    </label>
    <label class="container">Type 1
      <input type="radio" name="radio">
      <span class="checkmark"></span>
    </label>
    <label class="container">Type 2
      <input type="radio" name="radio">
      <span class="checkmark"></span>
    </label>
    </body>
    </html>
    <script>
    function function1() {
      var x = document.getElementById("myDIV");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
    </script>
    </body>
    </html>

Дублирование кнопки div в CSS

Ответы (0)