Pure CSS Dropdown Button

Developer
Izzy Skye
Size
2,192 Kb
Views
14,168
  1. Pure CSS Dropdown Button Previews
  2. Pure CSS Dropdown Button HTML Codes
  3. Pure CSS Dropdown Button CSS Codes

How do I make an pure css dropdown button?

Pure css dropdown button utilizing checkboxes. What is a pure css dropdown button? How do you make a pure css dropdown button? This script and codes were developed by Izzy Skye on 27 October 2022, Thursday.

Pure CSS Dropdown Button Previews
IQ Test

Pure CSS Dropdown Button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Dropdown Button</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="spinner-master small"> <div class="spinner-circle"> <input type="checkbox" id="spinner-form-small" /> <label for="spinner-form-small" class="spinner-spin"> <div class="spinner circle"></div> <div class="triangle"> <div class="spinner diagonal part-1"></div> <div class="spinner diagonal part-2"></div> </div> </label> </div>
</div>
<div class="spinner-master normal"> <div class="spinner-circle"> <input type="checkbox" id="spinner-form-normal" /> <label for="spinner-form-normal" class="spinner-spin"> <div class="spinner circle"></div> <div class="triangle"> <div class="spinner diagonal part-1"></div> <div class="spinner diagonal part-2"></div> </div> </label> </div>
</div>
<div class="spinner-master large"> <div class="spinner-circle"> <input type="checkbox" id="spinner-form-large" /> <label for="spinner-form-large" class="spinner-spin"> <div class="spinner circle"></div> <div class="triangle"> <div class="spinner diagonal part-1"></div> <div class="spinner diagonal part-2"></div> </div> </label> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
</body>
</html>

Pure CSS Dropdown Button - Script Codes CSS Codes

.spinner-master {position:relative;margin:5% auto;height:56px;width:56px;overflow:hidden;}
.spinner-master * {transition:all 0.3s;-webkit-transition:all 0.3s;box-sizing:border-box;}
.spinner-master .spinner-circle {position:absolute;margin:-22px 0 0 -26px;height:20px;width:20px;}
.spinner-master input[type=checkbox] {display:none;}
.spinner-master label {cursor:pointer;position:absolute;z-index:99;height:100%;width:100%;margin:50px;}
.spinner-master .spinner {position:absolute;background-color:#FFF;height:5px;width:100%;}
.spinner-master .circle {position:relative;float:left;margin:-27px 0 0 -115%;height:270%;width:270%;border:27px solid #000;border-radius:100%;background:none;}
.spinner-master .diagonal {position:relative;float:left;margin-top:-29px;}
.spinner-master .diagonal.part-1 {margin-left:0px;transform:rotate(-225deg);-webkit-transform:rotate(-225deg);}
.spinner-master .diagonal.part-2 {margin-left:-11px;transform:rotate(225deg);-webkit-transform:rotate(225deg);}
.spinner-master .spinner-spin:hover > .circle {border-width:5px;}
.spinner-master .spinner-spin:hover > .triangle > .spinner {background-color:#E0346A;}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin .diagonal {margin-top:-31px;}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin .part-1 {transform:rotate(225deg);-webkit-transform:rotate(225deg);}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin .part-2 {transform:rotate(-225deg);-webkit-transform:rotate(-225deg);}
.spinner-master.small {-webkit-transform:scale(0.4);-moz-transform:scale(0.4);-ms-transform:scale(0.4);-o-transform:scale(0.4);transform:scale(0.4);}
.spinner-master.small .spinner-spin:hover > .circle {border-width:0px;}
.spinner-master.small input[type=checkbox]:checked ~ .spinner-spin .circle {border-width:0px;}
.spinner-master.small input[type=checkbox]:checked ~ .spinner-spin .triangle > .spinner {background-color:#E0346A;}
.spinner-master.large {margin:8% auto;-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-ms-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5);}
.spinner-master.large .spinner-spin:hover > .circle {border-width:5px;}
.spinner-master.large input[type=checkbox]:checked ~ .spinner-spin .circle {border-width:5px;}
.spinner-master.large input[type=checkbox]:checked ~ .spinner-spin .triangle > .spinner {background-color:#E0346A;}
Pure CSS Dropdown Button - Script Codes
Pure CSS Dropdown Button - Script Codes
Home Page Home
Developer Izzy Skye
Username zephyr
Uploaded October 27, 2022
Rating 3
Size 2,192 Kb
Views 14,168
Do you need developer help for Pure CSS Dropdown Button?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Izzy Skye (zephyr) Script Codes
Name
Pure CSS Read More Arrow
Pure CSS Inanimate Cube Field
Small CSS Loading Animation
Pure CSS Arrow Collection
Material CSS Contact Popup
Material Button Click Example Usage
Pure CSS Spinning Cube
Pure CSS Menu Navigation
Pure CSS Wordpress Fancyboxes
Dynamic Spinning Cubes
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!