✍ 📁 🙈 🙉 🙊 : HTML button

<pre><t>HTML <<?>button> 表單按鈕</t>
  <<?>button>按鈕文字<<?>/button>  <button>按鈕文字</button>

<<?>input type="button" value="按鈕文字" > <input type="button" value="按鈕文字">

button   : 屬性  
  disabled : 不能夠動作的按鈕，僅能看不能按。
  name     : 按鈕的名稱
  type     : button（單純按鈕）、reset（清空表單）、submit（送出表單）
  value    : 按鈕文字、 按鈕的値

onclick="function ()" 
   onclick="{javascript}"
  
<</>input <r>onclick="alert('按我')"</r> type="button" value="按我" /> <input onclick="alert('按動')" type="button" value="按我" />

<</>button <r>onclick="alert('按我')"</r> > 按我 <</>/button> <button onclick="alert('按我')" > 按我 </button>

<</>button <r>onclick="alert('按我')"</r>><</>img src="url" /><</>/button><button onclick="alert('按我')" > <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8h9EfbSR8fPGNN1a7R-_zi3M6NJayt92j02qbZ4TY8MVoDEU_Y-pEiU03B6ya8jqxgh6D6XmVJ7isgHcE3VPORLiaor1u0QUCWkjtUdYDiuO__XQY1Xhu23fwIjTR9VzPKB_eJFxdWxpy/w40-h120-rw/"> </button>

<</>button style="background:url(圖片網址)" /></button><button style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8h9EfbSR8fPGNN1a7R-_zi3M6NJayt92j02qbZ4TY8MVoDEU_Y-pEiU03B6ya8jqxgh6D6XmVJ7isgHcE3VPORLiaor1u0QUCWkjtUdYDiuO__XQY1Xhu23fwIjTR9VzPKB_eJFxdWxpy/w40-h120-rw/); width:40px;height:25px" ></button>

</pre>

<t>CSS button</t>  <br>

<div id="DP1" >
<button id="B1"  onclick="Bcss(DP1)" title="B1">B1</button>
<style id="st1">
#B1{ height:50px ; width:50px ;
     font-size: 30px ;
     cursor: pointer ;
     color: #fff ;
     background-color: #4CAF50 ;
     border-radius: 50px ;
     box-shadow: 4px 4px #999 ;}

#B1:hover  { background-color: #3e8e41 ;}

#B1:active { background-color: #3e8e41 ;
             box-shadow: 1px 1px #666 ;
             transform: translate(4px,4px) ;}
</style>
</div>

<div id="DP2" >
<button id="B2"  onclick="Bcss(DP2)" title="B2">B2</button>
<style id="st2">
#B2 { height:50px; width:100px ;
      font-size: 30px ;
      cursor: pointer ;
      color: #fff ;
      background-color: #4CAF50;
      border-radius: 50px ;
      box-shadow: 4px 4px #999 ;}

#B2:hover  { background-color: #3e8e41 ;}

#B2:active { background-color: #3e8e41 ;
             box-shadow: 1px 1px #666 ;
             transform: translate(4px,4px) ;}

</style>
</div>

#B3:hover { background-color: gainsboro ;}

#B3:active { background-color: darkgray ;
             box-shadow: 1px 1px #666 ;
             transform: translate(4px,4px) ;}
</style>
</div>

<div id="DP4" >
<button id="B4"  onclick="Bcss(DP4)" title="B4">B4</button>
<style id="st4">
#B4 { height:20px ; width:50px ;
      font-size: 16px ;
      cursor: pointer ;
      color: black;
      background-color: lightgray ;
      border-radius: 8px ;
      box-shadow: 4px 4px #999 ;}

#B4:hover { background-color: gainsboro ;}

#B4:active { background-color: darkgray ;
             box-shadow: 1px 1px #666 ;
             transform: translate(4px,4px) ;}

</style>
</div>

#B5:hover {background-color: ghostwhite ;}

#B5:active { color: #666;
             box-shadow: inset 4px 4px 12px #c5c5c5,
             inset -4px -4px 12px #ffffff ;}
</style>
</div >

#B6:hover { background-color: gainsboro ;}

#B6:active { border: 3px inset #d5d5d5 ;}
</style>
</div >

#B7:hover { background-color: gainsboro ;}

#B7:active { background-color: darkgray ;
             box-shadow: 1px 1px #666 ;
             transform: translate(4px,4px) ;}

#B7{animation: mymove 1s infinite;}

@keyframes mymove { 60%  {color:crimson; }
                    80%  {color:yellow;  }
                    90%  {color:orange;  }
                    100% {color:brown;   }  }
</style>
</div>
</div>

function Bcss(x){
Textcss.value=x.innerHTML ;
}
Bcss(DP1)

</script>

.B1{
height:30px ; 
width:100px ; 
font-size: 18px ; 
cursor: pointer ; 
color: #fff ; 
background: darkgray ; 
border-radius: 50px ; 
box-shadow: 4px 4px #999 ;}

.B1:hover {
background: lightslategray  ;}

.B1:active {
background: gainsboro ; 
box-shadow: 1px 1px #666 ; 
transform: translate(4px,4px) ;}
</style>
</nobn >

.B2:hover {
background: lightslategray  ;}

.B2:active {
background: gainsboro ; 
box-shadow: 1px 1px #666 ; 
transform: translate(4px,4px) ;}
</style>
</nobn >

var TT ="</marquee>" ;
txt2 = txt2 .replace(TT,"<<?>/marquee>" ) ;
txt2 = txt2 .replace(TT,"<<?>/marquee>" ) ;

txt2 = txt2 .replace(/ </," <</>") ;
txt2 = txt2 .replace(/<m/,"<</>m") ;
txt2 = txt2 .replace(/<m/,"<</>m") ;
txt2 = txt2 .replace(/<style>/,"<br><br><</>style><br>") ;
txt2 = txt2 .replace(/;}/g,";}<br><br>") ;
txt2 = txt2 .replace(/; /g , ";<br>") ;
txt2 = txt2 .replace("</style>" , "<<?>/style>") ;

TP.innerHTML  = txt2   ;
}
Bcss(B1)

</script>

Edit

#html #style #script #javascript #button #input button #onclick #height #width #hover #background color #transform

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

HTML button

沒有留言:

張貼留言

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單