Switch Button Single element

Developer
Haeman
Size
2,741 Kb
Views
44,528
  1. Switch Button Single element Previews
  2. Switch Button Single element HTML Codes
  3. Switch Button Single element CSS Codes
  4. Switch Button Single element JS Codes

How do I make an switch button single element?

Switch Button Inspired by http://dribbble.com/shots/693683-iOS-App-Icon-Switch?list=popular&offset=148. What is a switch button single element? How do you make a switch button single element? This script and codes were developed by Haeman on 29 August 2022, Monday.

Switch Button Single element Previews
IQ Test

Switch Button Single element - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Switch Button Single element</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Open+Sans);
html{ height: 100%;
}
body{ background: -webkit-radial-gradient(center, ellipse cover, #b29f93 0%,#705f54 100%);
}
.btn{	background: -webkit-linear-gradient(top, #fff 0%,rgba(255,255,255,0.1) 3%),-webkit-linear-gradient(bottom, #e9e4e0 0%,rgba(255,255,255,0.1) 3%), -webkit-linear-gradient(top, #e5e0d8 0%,#f9f6f1 100%);	width: 100px;	height: 100px;	display: block;	border-radius: 10px;	margin:0px auto;	box-shadow: 0px -3px 0px #d2cdc4, 0px 0px 0px 4px #777069, 0px -2px 0px 4px #777069, 0px 0px 0px 10px #f9f6f2, 0px -2px 0px 10px #f9f6f2, 0px 0px 0px 11px #f0ebe7, 0px -2px 0px 11px #f0ebe7, 0px 0px 0px 20px #f9f6f2, 0px 4px 1px 20px #e4e1dc, 0px -4px 0px 20px #fdfcfb, 0px 4px 20px 20px #000;	margin-top: 50px;
}
.btn:after{	content: '';	width: 25px;	height: 8px;	margin: 15px 37px;	box-shadow: 0px 1px 3px rgba(0,0,0,0.4) inset, 0px 1px 0px #fff;	border-radius: 15px;	background: #f8d608;	position: absolute;
}
.btn:active{	background: -webkit-linear-gradient(bottom, #e9e4e0 0%,rgba(255,255,255,0.1) 3%), -webkit-linear-gradient(top, #e5e0d8 0%,#f9f6f1 100%);	box-shadow: 0px -4px 0px #d2cdc4 inset, 0px -3px 0px #e5e0d8, 0px 0px 0px 4px #777069, 0px -2px 0px 4px #777069, 0px 0px 0px 10px #f9f6f2, 0px -2px 0px 10px #f9f6f2, 0px 0px 0px 11px #f0ebe7, 0px -2px 0px 11px #f0ebe7, 0px 0px 0px 20px #f9f6f2, 0px 4px 1px 20px #e4e1dc, 0px -4px 0px 20px #fdfcfb, 0px 4px 20px 20px #000;
}
.btn:active:after{ margin: 13px 37px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <a href="#" class="btn"></a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Switch Button Single element - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
html{ height: 100%;
}
body{ background: -webkit-radial-gradient(center, ellipse cover, #b29f93 0%,#705f54 100%);
}
.btn{	background: -webkit-linear-gradient(top, #fff 0%,rgba(255,255,255,0.1) 3%),-webkit-linear-gradient(bottom, #e9e4e0 0%,rgba(255,255,255,0.1) 3%), -webkit-linear-gradient(top, #e5e0d8 0%,#f9f6f1 100%);	width: 100px;	height: 100px;	display: block;	border-radius: 10px;	margin:0px auto;	box-shadow: 0px -3px 0px #d2cdc4, 0px 0px 0px 4px #777069, 0px -2px 0px 4px #777069, 0px 0px 0px 10px #f9f6f2, 0px -2px 0px 10px #f9f6f2, 0px 0px 0px 11px #f0ebe7, 0px -2px 0px 11px #f0ebe7, 0px 0px 0px 20px #f9f6f2, 0px 4px 1px 20px #e4e1dc, 0px -4px 0px 20px #fdfcfb, 0px 4px 20px 20px #000;	margin-top: 50px;
}
.btn:after{	content: '';	width: 25px;	height: 8px;	margin: 15px 37px;	box-shadow: 0px 1px 3px rgba(0,0,0,0.4) inset, 0px 1px 0px #fff;	border-radius: 15px;	background: #f8d608;	position: absolute;
}
.btn:active{	background: -webkit-linear-gradient(bottom, #e9e4e0 0%,rgba(255,255,255,0.1) 3%), -webkit-linear-gradient(top, #e5e0d8 0%,#f9f6f1 100%);	box-shadow: 0px -4px 0px #d2cdc4 inset, 0px -3px 0px #e5e0d8, 0px 0px 0px 4px #777069, 0px -2px 0px 4px #777069, 0px 0px 0px 10px #f9f6f2, 0px -2px 0px 10px #f9f6f2, 0px 0px 0px 11px #f0ebe7, 0px -2px 0px 11px #f0ebe7, 0px 0px 0px 20px #f9f6f2, 0px 4px 1px 20px #e4e1dc, 0px -4px 0px 20px #fdfcfb, 0px 4px 20px 20px #000;
}
.btn:active:after{ margin: 13px 37px;
}

Switch Button Single element - Script Codes JS Codes

//Inspired by http://dribbble.com/shots/693683-iOS-App-Icon-Switch?list=popular&offset=148
Switch Button Single element - Script Codes
Switch Button Single element - Script Codes
Home Page Home
Developer Haeman
Username pedox
Uploaded August 29, 2022
Rating 3.5
Size 2,741 Kb
Views 44,528
Do you need developer help for Switch Button Single element?

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!

Haeman (pedox) Script Codes
Name
Google Metro Flatten
Thin Google Homepage
WhatsApp Logo Pure CSS3
Keroppi
Mac
Loading Hourglass
The Rainbow
Custom Select Checkbox
IOS 7 Icon
Terminal
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!