CSS

CODE: democss.bas

CODE: demo2.css

CODE: democss2.bas

cls

cssexternal "/demo2.css"

a = 50

b = 1

c = 0

d = 0

a$ = ""

a$ = a$ + textbox$(a, "tbox") + "<br>"

a$ = a$ + slider$(a,0,100, 1, "slider") + "<br>"

a$ = a$ + button$("Red", gohere, "butred") + "<br><br>"

a$ = a$ + button$("Blue", gohere, "butblue") + "<br><br>"

' this is a checkbox using the variable 'c' (data-var='c')

A$ = A$ + |<div class="onoffswitch">|

A$ = A$ + | <input type="checkbox" data-var='c' onchange='cmdChange(event)' class="onoffswitch-checkbox" id="mycheck1" checked>|

A$ = A$ + | <label class="onoffswitch-label" for="mycheck1">|

A$ = A$ + | <span class="onoffswitch-inner"></span>|

A$ = A$ + | <span class="onoffswitch-switch"></span>|

A$ = A$ + | </label>|

A$ = A$ + |</div>| + "<br>"

' this is a checkbox using the variable 'd' (data-var='d')

A$ = A$ + |<div class="onoffswitch">|

A$ = A$ + | <input type="checkbox" data-var='d' onchange='cmdChange(event)' class="onoffswitch-checkbox" id="mycheck2" checked>|

A$ = A$ + | <label class="onoffswitch-label" for="mycheck2">|

A$ = A$ + | <span class="onoffswitch-inner2"></span>|

A$ = A$ + | <span class="onoffswitch-switch"></span>|

A$ = A$ + | </label>|

A$ = A$ + |</div>|

html a$waitgohere:return

}#butred:hover { background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%); background-color:#f24437;}#butred:active { position:relative; top:1px;}#butblue { box-shadow: 3px 4px 0px 0px #1564ad; background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%); background-color:#79bbff; border-radius:5px; border:1px solid #337bc4; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:17px; font-weight:bold; padding:12px 44px; text-decoration:none; text-shadow:0px 1px 0px #528ecc;}#butblue:hover { background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%); background-color:#378de5;}#butblue:active { position:relative; top:1px;} #slider { -webkit-appearance: none; width: 180px; height: 15px; border-radius: 5px; background: #d3d3d3; outline: none; opacity: 0.7; margin: 10px 0 10px 0;}#slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: #4CAF50; cursor: pointer;}#slider::-moz-range-thumb { width: 25px; height: 25px; border-radius: 50%; background: #4CAF50; cursor: pointer;}

CODE: demo2.css

}#butred:hover { background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%); background-color:#f24437;}#butred:active { position:relative; top:1px;}#butblue { box-shadow: 3px 4px 0px 0px #1564ad; background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%); background-color:#79bbff; border-radius:5px; border:1px solid #337bc4; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:17px; font-weight:bold; padding:12px 44px; text-decoration:none; text-shadow:0px 1px 0px #528ecc;}#butblue:hover { background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%); background-color:#378de5;}#butblue:active { position:relative; top:1px;} #slider { -webkit-appearance: none; width: 180px; height: 15px; border-radius: 5px; background: #d3d3d3; outline: none; opacity: 0.7; margin: 10px 0 10px 0;}#slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: #4CAF50; cursor: pointer;}#slider::-moz-range-thumb { width: 25px; height: 25px; border-radius: 50%; background: #4CAF50; cursor: pointer;}.onoffswitch { position: relative; width: 90px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;}.onoffswitch-checkbox { display: none;}.onoffswitch-label { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 20px;}.onoffswitch-inner, .onoffswitch-inner2 { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s;}.onoffswitch-inner:before, .onoffswitch-inner:after,.onoffswitch-inner2:before, .onoffswitch-inner2:after { display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; box-sizing: border-box;}.onoffswitch-inner:before { content: "ON"; padding-left: 10px; background-color: #34A7C1; color: #FFFFFF;}.onoffswitch-inner:after { content: "OFF"; padding-right: 10px; background-color: #EEEEEE; color: #999999; text-align: right;}.onoffswitch-inner2:before { content: "SET"; padding-left: 10px; background-color: #F50A5C; color: #FFFFFF;}.onoffswitch-inner2:after { content: "RESET"; padding-right: 10px; background-color: #EEEEEE; color: #999999; text-align: right;}.onoffswitch-switch { display: block; width: 18px; margin: 6px; background: #FFFFFF; position: absolute; top: 0; bottom: 0; right: 56px; border: 2px solid #999999; border-radius: 20px; transition: all 0.3s ease-in 0s; }.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { margin-left: 0;}.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner2 { margin-left: 0;}.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { right: 0px; }