It was Hippocrates (460 BC-370 BC) who introduced disease and treatment as Science and freed this noble profession from superstitions and disbelieves. Hippocrates disputed the theory of “ill spirits” and proved that there were “Real and Physical causes” behind illnesses. Hippocrates postulated the basic principles of Medicine, and introduced Humoural theory. In Greek literature around 60 treatises often attributed to Hippocrates. “Natural forces within us (طبیعت) are the true healers of disease” –Hippocrates. Hippocrates was the first Epidemiologist, he authored the famous books Epidemics I and III. He also framed ethical responsibilities of medical professionals which is now known as Hippocratic oath. This oath is the earliest expression of medical ethics; this includes Principles of medical ethics, Principles of medical confidentiality and non-maleficence. Even today, this oath is taken by passing Medial graduates.

The switch button is a commonly used UI element that allows users to toggle between two states, typically representing an "on" or "off" state. In this example, we create a switch button using CSS by utilizing the checkbox input element and styling it to achieve the desired switch effect.

By toggling the checkbox, users can interact with the switch button and observe the visual changes in its appearance, indicating the current state of the switch.

How to create switch button

Create HTML structure for switch button as follows:

<div class="componentsBox">

        <div class="title">
            <h2>Switch button</h2>
        </div>

        <div class="content">
            <label class="switch m5">
                <input type="checkbox">
                <small></small>
            </label>

            <label class="switch m5">
                <input type="checkbox">
                <small></small>
            </label>

            <label class="switch m5">
                <input type="checkbox" checked="">
                <small></small>
            </label>
        </div>


        <div class="content">
            <label class="switchSmall m5">
                <input type="checkbox">
                <small></small>
            </label>

            <label class="switchSmall m5">
                <input type="checkbox">
                <small></small>
            </label>

            <label class="switchSmall m5">
                <input type="checkbox" checked="">
                <small></small>
            </label>
        </div>


        <div class="content">
            <label class="switchSmall2 m5">
                <input type="checkbox">
                <small></small>
            </label>

            <label class="switchSmall2 m5">
                <input type="checkbox">
                <small></small>
            </label>

            <label class="switchSmall2 m5">
                <input type="checkbox" checked="">
                <small></small>
            </label>
        </div>
    </div>

The complete CSS styles for switch button:

body {
            margin: 0;
		    padding: 0;
		    background: #67b57b;
		    font-family: sans-serif;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    height: 100vh;
        }

        * {
            box-sizing: border-box;
        }

        .componentsBox {
            padding: 50px;
            text-align: center;
        }

        .title h2 {
            font-size: 30px;
            color: #ffffff;
            font-weight: 700;
            line-height: 1.2em;
            margin: 0 0 35px;
        }

        .componentsBox .content {
            margin-bottom: 20px;
        }

        .m5 {
            margin: 0 5px;
        }

        .switch {
            display: inline-block;
        }

        .switch input {
            display: none;
        }

        .switch small {
            display: inline-block;
            width: 52px;
    		height: 22px;
            background: #455a64;
            border-radius: 30px;
            position: relative;
            cursor: pointer;
        }

        .switch small:after {
            content: "No";
            position: absolute;
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            width: 100%;
            left: 0px;
            text-align: right;
            padding: 0 6px;
            box-sizing: border-box;
            line-height: 22px;
        }

        .switch small:before {
            content: "";
            position: absolute;
            width: 16px;
            height: 16px;
            background: #fff;
            border-radius: 50%;
            top: 3px;
            left: 3px;
            transition: .3s;
            box-shadow: -3px 0 3px rgba(0, 0, 0, 0.1);
        }

        .switch input:checked~small {
            background: #4fc5c5;
            transition: .3s;
        }

        .switch input:checked~small:before {
            transform: translate(29px, 0px);
            transition: .3s;
        }

        .switch input:checked~small:after {
            content: "Yes";
            text-align: left;
        }

        .switchSmall {
            display: inline-block;
        }

        .switchSmall input {
            display: none;
        }

        .switchSmall small {
            display: inline-block;
            width: 40px;
            height: 18px;
            background: #455a64;
            border-radius: 30px;
            position: relative;
            cursor: pointer;
        }

        .switchSmall small:before {
            content: "";
            position: absolute;
            width: 12px;
            height: 12px;
            background: #fff;
            border-radius: 50%;
            top: 3px;
            left: 3px;
            transition: .3s;
            box-shadow: -3px 0 3px rgba(0, 0, 0, 0.1);
        }

        .switchSmall input:checked~small {
            background: #4fc5c5;
            transition: .3s;
        }

        .switchSmall input:checked~small:before {
            transform: translate(21px, 0px);
            transition: .3s;
        }

        .switchSmall2 {
            display: inline-block;
        }

        .switchSmall2 input {
            display: none;
        }

        .switchSmall2 small {
            display: inline-block;
            width: 45px;
            height: 15px;
            background: #455a64;
            border-radius: 30px;
            position: relative;
            cursor: pointer;
        }

        .switchSmall2 small:before {
            content: "";
            position: absolute;
            width: 19px;
            height: 19px;
            background: #fff;
            border-radius: 50%;
            top: -2px;
            left: -1px;
            transition: .3s;
            box-shadow: -3px 0 3px rgba(0, 0, 0, 0.25);
        }

        .switchSmall2 input:checked~small {
            background: #4fc5c5;
            transition: .3s;
        }

        .switchSmall2 input:checked~small:before {
            transform: translate(27px, 0px);
            transition: .3s;
            box-shadow: 3px 0 3px rgba(0, 0, 0, 0.25);
        }

This code creates a floating menu that appears on the bottom right corner of the screen. The menu contains a list of links, such as Home, About, Services, and Contact. The CSS styles the menu with a background color, adds some spacing between the items, and provides a hover effect.

I am going to make Float Corner Menu. It will be in the bottom right corner of your website. This will increase the look of your website. There is a round menu in it, on clicking it you get the option of four round link, by clicking on which you can go to another page. I find it very attractive.

Add this jquery link bottom of body for run Jquery:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

HTML:

<div class="menu_overlay"></div>

<div class="cornerMenu">
	<i class="fa fa-bars" aria-hidden="true"></i>

	<div class="menu menu1"><i class="fa fa-envelope-o" aria-hidden="true"></i></div>
	<div class="menu menu2"><i class="fa fa-envira" aria-hidden="true"></i></div>
	<div class="menu menu3"><i class="fa fa-address-card-o" aria-hidden="true"></i></div>
	<div class="menu menu4"><i class="fa fa-handshake-o" aria-hidden="true"></i></div>
</div>

<div class="container">
	<div class="head">
		<span>Website Header</span>
	</div>

	<div class="content">
		<h1>Animated circle Navigation</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra molestie urna a maximus. Ut varius libero bibendum quam varius fringilla.</p>
	</div>
</div>

CSS:

body {
  		margin: 0;
  		padding: 0;
  		background: #f0f0f0;
  		font-family: sans-serif;
  }
* {
  		box-sizing: border-box;
  } 
.container {
    max-width: 1200px;
    margin: 0 auto;
    height: 100vh;
    background: #fff;
}
.head {
	    background: #4cab80;
	    height: 50px;
	    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.10);
	    padding: 10px;
	    text-align: center;
	    font-size: 24px;
	    font-weight: 600;
	    color: #fff;
	}
	.head a {
	    padding: 3px 5px;
	    color: #fff;
	    font-size: 20px;
	    margin: 1px 10px;
	    display: inline-block;
	    float: left;
  }
	.head span {
	    margin-top: 2px;
	    display: inline-block;
	}
	.content {
		max-width: 750px;
		margin: 0 auto;
		text-align: center;
		margin-top: 10%;
	}
	.content h1 { color: #4cab80; }
	.sidebarMenu p { color: #947234; margin-top: 10%; text-align: center; }
	.menu_overlay {
	    display: none;
	    position: fixed;
	    background: rgba(0,0,0,0.4);
	    top: 0%;
	    left: 0%;
	    width: 100%;
	    height: 100%;
	    z-index: 1;
	}
	
	.menuOpened .menu_overlay {
		display: block;
	}

	body.menuOpened { overflow: hidden; }
	.cornerMenu {
	    width: 50px;
	    height: 50px;
	    position: fixed;
	    right: 25px;
	    bottom: 25px;
	    background: #4cab80;
	    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.10);
	    border-radius: 50%;
	    text-align: center;
	    line-height: 54px;
	    color: #fff;
	    font-size: 22px;
	    z-index: 6;
	    cursor: pointer;
	}
	.menu {
	    width: 40px;
	    height: 40px;
	    position: absolute;
	    background: #4cab80;
	    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.10);
	    border-radius: 50%;
	    text-align: center;
	    line-height: 42px;
	    color: #fff;
	    font-size: 16px;
	    top: 5px;
	    right: 0;
	    left: 0;
	    margin: auto;
	    transform: translate(0, 0);
	    opacity: 0;
	    z-index: 5;
	    transition: all .4s ease-in-out;
	}

	.menuOpened .menu {
		opacity: 1;
	    transition: all .4s ease-in-out;
	}
	.menuOpened .menu1 {
	    transform: translate(-105px, 20px);
	    transition-delay: 0s;
	}
	.menuOpened .menu2 {
	    transform: translate(-78px, -33px);
	    transition-delay: .05s;
	}
	.menuOpened .menu3 {
	    transform: translate(-38px, -76px);
	    transition-delay: .1s;
	}
	.menuOpened .menu4 {
	    transform: translate(18px, -99px);
	    transition-delay: .15s;
	}

Java Script:

    $(document).ready(function(){
        $(".openMenu, .cornerMenu").click(function(){
            $("body").toggleClass("menuOpened");
        });

        $(".menu_overlay").click(function(){
            $("body").removeClass("menuOpened");
        });
    });