"Note js/html/css" with Div for personalized button, translucent background

The button default style in HTML: Not very good to see, if you adjust the background color and font, it is also suitable for simple page design

So decided to cooperate with JS, using the div in the HTML to complete the button

Final result diagram:

HTML code: (First_passer.png is the "passer-by" the word background transparent picture)

<div class= "button" id= "Button3" ></div>

(name can be arbitrary)

CSS code:

margin-top:20%;
height:12%;/* should be set according to your own code, where the outer layer is nested, so use the percentage */
width:100%;
border-radius:10px;
BORDER:1PX solid black;
Text-align:center;
Background:rgba (255, 251, 240, 0.3); /*r G B opacity*/

JS implementation of the function: the mouse overlay 0.5 transparency, leaving 0.3 transparency, and read browser wide, adaptive settings div length width, set div image height with div, width auto.

$ ("button3_img"). Style.height = screen.availheight * 0.70 * 0.7 * 0.12 + "px";

$ ("button3_img"). Style.width = "Auto";

Since the height of the div is also set according to the percentage of screen.availheight, it is available here Screen.availheight * 0.70 * 0.7 * 0.12 indicates div height.

The following JS code is used to set the change in background transparency when the mouse points and leaves the button:

$ ("Button3"). onmouseover = Passerby_move;

$ ("Button3"). onmouseout = Passerby_out;

function Passerby_out () {
$ ("Button3"). Style.background = "Rgba (255, 251, 240, 0.3)";
}

function Passerby_move () {
$ ("Button3"). Style.background = "Rgba (255, 251, 240, 0.5)";
}

PS: Almost forgot that the $ here is set by itself, not jquery, the code is as follows:

$=function (ID) {
return document.getElementById (ID);
}

Note js/html/css Personalize button with Div, translucent background