Помогите с кнопками на сцене..

[Alex_kn]

Нашел в интернете https://www.freshdesignweb.com/css3-buttons/ интересные рисунки на выключатель. Особенно интересует https://tympanus.net/Tutorials/CSS3Butt ... ndex2.htmlПопробовал поставить на сцену, почти получилось.. но так как не разу не программист настроить не могу чтобы правильно отображались и взаимодействовали со сценой. Надеюсь на помощь специалистов. Буду очень благодарен за помощь.

[Alexsan]

Нашел в интернете https://www.freshdesignweb.com/css3-buttons/ интересные рисунки на выключатель. Особенно интересует https://tympanus.net/Tutorials/CSS3Butt ... ndex2.htmlПопробовал поставить на сцену, почти получилось.. но так как не разу не программист настроить не могу чтобы правильно отображались и взаимодействовали со сценой. Надеюсь на помощь специалистов. Буду очень благодарен за помощь.

а что именно не получается?

[Alex_kn]

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

[Alex_kn]

Код: Выделить всё

/* GLOBALS */

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.switch {
  margin: 50px auto;
  position: relative;
}

.switch label {
 width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

.switch input {
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  opacity: 0;
  z-index: 100;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}


.switch {
  width: 50px;
  height: 100px;
}

.switch label {
  background: #cbc7bc;
  margin: 0 auto;
  border-radius: 5px;
  box-shadow:
      inset 0 1px 0 white,
      0 0 0 1px #999,
      0 0 5px 1px rgba(0,0,0,0.2),
      0 2px 0 rgba(255,255,255,0.6),
      inset 0 10px 1px #e5e5e5,
      inset 0 11px 0 rgba(255,255,255,0.5),
      inset 0 -45px 3px #ddd;
}

.switch label:after {
  content: "";
  position: absolute;
  top: -20px;
  left: -25px;
  bottom: -20px;
  right: -25px;
  background: #ccc;
  background: -moz-linear-gradient(#ddd, #bbb);
  background: -ms-linear-gradient(#ddd, #bbb);
  background: -o-linear-gradient(#ddd, #bbb);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#ddd), to(#bbb));
  background: -webkit-linear-gradient(#ddd, #bbb);
  background: linear-gradient(#ddd, #bbb);
  z-index: -1;
  border-radius: 5px;
  border: 1px solid #bbb;
  box-shadow:
      0 0 5px 1px rgba(0,0,0,0.15),
      0 3px 3px rgba(0,0,0,0.3),
      inset 0 1px 0 rgba(255,255,255,0.5);
}

.switch label:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: #666;
  top: -13px;
  left: 20px;
  border-radius: 50%;
  box-shadow:
      0 120px 0 #666,
      0 1px 0 white,
      0 121px 0 white;
}

.switch input:checked ~ label {
  background: #d2cbc3;
  box-shadow:
      inset 0 1px 0 white,
      0 0 0 1px #999,
      0 0 5px 1px rgba(0,0,0,0.2),
      inset 0 -10px 0 #aaa,
      0 2px 0 rgba(255,255,255,0.1),
      inset 0 45px 3px #e0e0E0,
      0 8px 6px rgba(0,0,0,0.18);
}

<div class="switch">
        <input type="checkbox">
        <label></label>
</div>

[Alexsan]

Код: Выделить всё

/* GLOBALS */

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.switch {
  margin: 50px auto;
  position: relative;
}

.switch label {
 width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

.switch input {
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  opacity: 0;
  z-index: 100;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}


.switch {
  width: 50px;
  height: 100px;
}

.switch label {
  background: #cbc7bc;
  margin: 0 auto;
  border-radius: 5px;
  box-shadow:
      inset 0 1px 0 white,
      0 0 0 1px #999,
      0 0 5px 1px rgba(0,0,0,0.2),
      0 2px 0 rgba(255,255,255,0.6),
      inset 0 10px 1px #e5e5e5,
      inset 0 11px 0 rgba(255,255,255,0.5),
      inset 0 -45px 3px #ddd;
}

.switch label:after {
  content: "";
  position: absolute;
  top: -20px;
  left: -25px;
  bottom: -20px;
  right: -25px;
  background: #ccc;
  background: -moz-linear-gradient(#ddd, #bbb);
  background: -ms-linear-gradient(#ddd, #bbb);
  background: -o-linear-gradient(#ddd, #bbb);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#ddd), to(#bbb));
  background: -webkit-linear-gradient(#ddd, #bbb);
  background: linear-gradient(#ddd, #bbb);
  z-index: -1;
  border-radius: 5px;
  border: 1px solid #bbb;
  box-shadow:
      0 0 5px 1px rgba(0,0,0,0.15),
      0 3px 3px rgba(0,0,0,0.3),
      inset 0 1px 0 rgba(255,255,255,0.5);
}

.switch label:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: #666;
  top: -13px;
  left: 20px;
  border-radius: 50%;
  box-shadow:
      0 120px 0 #666,
      0 1px 0 white,
      0 121px 0 white;
}

.switch input:checked ~ label {
  background: #d2cbc3;
  box-shadow:
      inset 0 1px 0 white,
      0 0 0 1px #999,
      0 0 5px 1px rgba(0,0,0,0.2),
      inset 0 -10px 0 #aaa,
      0 2px 0 rgba(255,255,255,0.1),
      inset 0 45px 3px #e0e0E0,
      0 8px 6px rgba(0,0,0,0.18);
}

<div class="switch">
        <input type="checkbox">
        <label></label>
</div>

 

я думаю что class нужно поменять что бы было легче себе, на счет кнопки есть видео сергея https://www.youtube.com/watch?v=C8g9pBDLXDAтам описанно все подробно... вам нужно будет делать 2 class(а) а сам css разделить что бы все работало как надо

[Alex_kn]

.. если бы было так просто как вы советуете то я бы не просил бы помощи... она не хочет становится баттоном только чекбоксом .... и она залазит под картинку сцены при перемещении.. поэтому я и прошу помощи специалистов...

[Alexsan]

.. если бы было так просто как вы советуете то я бы не просил бы помощи... она не хочет становится баттоном только чекбоксом .... и она залазит под картинку сцены при перемещении.. поэтому я и прошу помощи специалистов...

походу она не будет работать,checkbox_это как флажок,а button это как кнопка