How To Create Dark Mode Button

1. Create A Html File

2. Type Code That Gives You Below

3. Save As FileName.html

4. Run In Any Browser

Code Of Dark Mode Button

HTML CODE

<body translate="no">

<div class="container">

<h1 class="header">Night Mode</h1>

<div class="paragraph">

<p>Night Shift might help strain the eyes less if the surrounding area is dark.</p>

<p>Your Google Drive storage is full. You have exceeded your storage plan: this means that your documents, contacts and device

data are no longer being backed up to Drive and your photos and videos are not being uploaded securly saved.

Google Drive and Google-enabled apps are also not being updated across your devices.</p>

<p> To continue using these services, you need to upgrade your storage plan or reduce the amount of storage you are using.</p>

<button class="nightModeButton">

<img class="button-image" src="http://www.stickpng.com/assets/images/580b57fcd9996e24bc43c399.png">Night Mode

</button>

</div>

CSS CODE

body {

background: #e2e1e0;

font-family: Arial, Helvetica, sans-serif;

margin: 0;

padding: 0;

transition: all 1s cubic-bezier(.25,.8,.25,1);

}

.header {

text-align: center;

margin-top: 0;

color: #333333;

transition: all 0.3s cubic-bezier(.25,.8,.25,1);

}

.container {

max-width: 70%;

margin: auto;

box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

background: white;

padding: 40px;

transition: all 0.3s cubic-bezier(.25,.8,.25,1);

}

.paragraph {

max-width: 90%;

margin: auto;

color: #333333;

}

button {

padding: 15px 15px 10px 15px;

border: none;

text-align: center;

background: #333333;

font-size: 18px;

text-decoration: none;

color: white;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

transition: all 0.3s cubic-bezier(.25,.8,.25,1);

outline: 0;

cursor: pointer;

}

button:hover {

box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

}

.button-image {

height: 20px;

margin-right: 5px;

margin-bottom: 5px;

vertical-align: middle;

}

button.night-mode {

color: #333333;

background-color: white;

}

.container.night-mode {

background: #181b23;

color: white;

}

.paragraph.night-mode {

color: #c8c8c8;

}

.header.night-mode {

color: #ddc986;

}

body.night-mode {

background: #232732;

}

JAVASCRIPT CODE

window.console = window.console || function(t) {};

if (document.location.search.match(/type=embed/gi)) {

window.parent.postMessage("resize", "*");

}

(script id="rendered-js") Script Tag Id

var nightModeToggleButton = document.querySelector(".nightModeButton");

var container = document.querySelector(".container");

var para = document.querySelector(".paragraph");

var header = document.querySelector(".header");

var body = document.querySelector("body");

nightModeToggleButton.onclick = function () {

nightModeToggleButton.classList.toggle("night-mode");

container.classList.toggle("night-mode");

para.classList.toggle("night-mode");

header.classList.toggle("night-mode");

body.classList.toggle("night-mode");

};

//# sourceURL=pen.js

(script)

THANK YOU....

SUBSCRIBE MY YOU TUBE CHANNEL AND DOWNLOAD THE FULL CODE

Download Code Below & Tutorial Also Give Below

Link After Subscribe:

Click On The Button And Subscribe My Youtube Channel To Open Link Then Get Back To The Page...

How To Create Dark Mode Button | dark mode button | how to create dark mode switch | how to create dark mode

How To Create Dark Mode Button