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");
        });
    });

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);
        }