✍ 📁 🙈 🙉 🙊 : 標簽 <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 測試 左單右單

HTML button

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單