Three-Button change

Give the button a color, achieve hover, click the discoloration effect.

<! DOCTYPE html>"en">"UTF-8"> <title>Document</title> <style type="Text/css">#main {position:relative; Display:inline-Block;            } button{height:30px; Line-height:30px; Background:rgba (0,0,0,0); Font-size:14px;            padding:0px 15px;            Outline:none;            Border:none;s}. divcan{Position:absolute; Top:0; Left:0; Width: -%; Height: -%; Z-index:-10001;        Background:green; }    </style>"Main"> <button> Press Twist </button> <divclass="Divcan"></div> </div> <script type="Text/javascript">varBtn=document.getelementsbytagname ('Button')[0]; Console.log (BTN) Btn.onclick=function (e) {Console.log (1)             This. style.backgroundcolor="Rgba (0,0,0,0.20)"} btn.onmouseover=function (e) { This. style.backgroundcolor="Rgba (0,0,0,0.09)"} btn.onmouseout=function (e) { This. style.backgroundcolor="Rgba (0,0,0,0)"        }    </script></body>
This is actually a little abnormal, the color appears covered, and there is no order to say, think better control button color can be added, delete class to achieve, can appear multiple classes can have their place from the surface can have different effects; interested can try.
Three-Button change