Guest User

StackOverflow q:71798689 [css]

a guest
Apr 8th, 2022
195
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.80 KB | None | 0 0
  1. .switch {
  2.     position: relative;
  3.     display: inline-block;
  4.     width: 60px;
  5.     height: 34px;
  6.   }
  7.  
  8.   .switch input {
  9.     opacity: 0;
  10.     width: 0;
  11.     height: 0;
  12.   }
  13.  
  14.   .slider {
  15.     position: absolute;
  16.     cursor: pointer;
  17.     top: 0;
  18.     left: 0;
  19.     right: 0;
  20.     bottom: 0;
  21.     background-color: #ccc;
  22.     -webkit-transition: .4s;
  23.     transition: .4s;
  24.   }
  25.  
  26.   .slider:before {
  27.     position: absolute;
  28.     content: "";
  29.     height: 26px;
  30.     width: 26px;
  31.     left: 4px;
  32.     bottom: 4px;
  33.     background-color: white;
  34.     -webkit-transition: .4s;
  35.     transition: .4s;
  36.   }
  37.  
  38.   input:checked + .slider {
  39.     background-color: #2196F3;
  40.   }
  41.  
  42.   input:focus + .slider {
  43.     box-shadow: 0 0 1px #2196F3;
  44.   }
  45.  
  46.   input:checked + .slider:before {
  47.     -webkit-transform: translateX(26px);
  48.     -ms-transform: translateX(26px);
  49.     transform: translateX(26px);
  50.   }
  51.  
  52.   /* Rounded sliders */
  53.   .slider.round {
  54.     border-radius: 34px;
  55.   }
  56.  
  57.   .slider.round:before {
  58.     border-radius: 50%;
  59.   }
  60.  
  61. /*END OF TOGGLE SWITCH*/
  62.  
  63. .hideme {
  64.   /*-------------*/
  65.   display: none;
  66.   margin-top: 10px;
  67.   /*-------------*/
  68.   padding:20px;
  69.   background: blue;
  70.   color: white;
  71.   font-weight: 800;
  72.   text-align: center;
  73. }
  74.  
  75. /*----------------------------*/
  76. /* I added the following ones */
  77. /*----------------------------*/
  78.  
  79. input[type='button'] {
  80.   display: block;
  81.   cursor: pointer;
  82.   margin-top: 10px;
  83.   background: lightblue;
  84.   border: solid 1px darkblue;
  85.   padding: 5px 5px;
  86.   border-radius: 4px;
  87. }
  88.  
  89. input[type='button']:active {
  90.   background: red;
  91. }
  92.  
  93. #stored_states_count{
  94.   margin-left: 5px;
  95.   font-weight: 700;
  96.   font-size: 14pt;
  97.   border: solid 3px green;
  98.   padding: 2px 6px;
  99. }
  100.  
  101. .info{
  102.   border: solid 1px darkgray;
  103.   padding: 10px;
  104.   margin-top: 10px;
  105. }
Advertisement
Add Comment
Please, Sign In to add comment