+
1
|
list
|
skin
|
login
|
editor
α-wwwiki
::
buttons
user:none
(4219 bytes)
_h3 buttons _p Click on "include someCSS to display fancy buttons (adapted from a source of Alexander Bell - 2011). {input {@ type="submit" value="include someCSS" onclick="°° var css = document.createElement('style'); css.innerHTML = getId('styles').innerHTML; document.head.appendChild( css ); this.value = 'OK, someCSS is included !'; this.disabled='disabled'; °°"}} {div {@ id="cute"} {input {@ type ="button" button value="a" class="btnType2"}} {input {@ type ="button" button value="l" class="btnType2"}} {input {@ type ="button" button value="a" class="btnType2"}} {input {@ type ="button" button value="i" class="btnType2"}} {input {@ type ="button" button value="n" class="btnType2"}} {div {@ class="divClear"}} {input {@ type ="button" button value="m" class="btnType2"}} {input {@ type ="button" button value="a" class="btnType2"}} {input {@ type ="button" button value="r" class="btnType2"}} {input {@ type ="button" button value="t" class="btnType2"}} {input {@ type ="button" button value="y" class="btnType2"}} {div {@ class="divClear"}} {input {@ type ="button" button value="α" class="btnType1"}} {input {@ type ="button" button value="2" class="btnType4"}} {input {@ type ="button" button value="0" class="btnType4"}} {input {@ type ="button" button value="1" class="btnType5"}} {input {@ type ="button" button value="3" class="btnType5"}} {div {@ class="divClear"}} {input {@ type ="button" button value="α" class="btnType2"}} {input {@ type ="button" button value="°°{°°" class="btnType2"}} {input {@ type ="button" button value="λ" class="btnType2"}} {input {@ type ="button" button value="y" class="btnType2"}} {input {@ type ="button" button value="°°}°°" class="btnType2"}} } _h3 CSS rules {pre {@ id="styles" style="white-space:pre-wrap;"}°° #cute input { width:80px; height: 60px; line-height:60px; vertical-align:middle; margin: 0px; padding: 0px; cursor: pointer; cursor: hand; font-family: Arial, Tahoma, Verdana, Calibri; font-size: 28pt; text-align: center; background:#404040; border: 2px solid #ababab; color: #dadada; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } #cute input:hover { font-weight:bold;} #cute input:active { border: 2px; } #cute .btnType1{background: -moz-linear-gradient(top, #707070, #505050 48%, #bababa 50%, #303030 52%, #101010);background: -webkit-gradient(linear, center top, center bottom, from(#707070), color-stop(0.48, #505050), color-stop(0.5, #bababa ), color-stop(0.52, #303030), to(#101010)); } #cute .btnType2{background: -moz-linear-gradient(top, #dadada, #505050 5%, #bababa 50%, #bababa 50%, #303030 52%, #101010);background: -webkit-gradient(linear, center top, center bottom, from(#707070), color-stop(0.48, #505050), color-stop(0.5, #bababa ), color-stop(0.52, #303030), to(#101010)); } #cute .btnType3{background: -moz-linear-gradient(top, #dadada, #707070 5%, #515151 50%, #bababa 50%, #303030 52%, #101010);background: -webkit-gradient(linear, center top, center bottom, from(#707070), color-stop(0.48, #505050), color-stop(0.5, #bababa ), color-stop(0.52, #303030), to(#101010)); } #cute .btnType4{color:#505050;background: -moz-linear-gradient(top, #f0f0f0, #bababa 10%, #cacaca 46%, #909090 48%, #dadada 52%, #cacaca 54%, #cacaca 90%, #ababab);background: -webkit-gradient(linear, center top, center bottom, from(#f0f0f0), color-stop(0.1, #bababa ), color-stop(0.46, #cacaca), color-stop(0.48, #909090), color-stop(0.52, #dadada ), color-stop(0.54, #cacaca), color-stop(0.90, #cacaca), to(#ababab)); } #cute .btnType5{color:#505050;background: -moz-linear-gradient(top, #f0f0f0, #cacaca 48%, #707070 50%, #cacaca 52%, #fafafa);background: -webkit-gradient(linear, center top, center bottom, from(#f0f0f0), color-stop(0.48, #cacaca), color-stop(0.5, #707070 ), color-stop(0.52, #cacaca), to(#fafafa)); } .divClear { clear:both;} °°}