Toggle Buttton

Developer
Juwan Petty
Size
2,227 Kb
Views
16,192
  1. Toggle Buttton Previews
  2. Toggle Buttton HTML Codes
  3. Toggle Buttton CSS Codes
  4. Toggle Buttton JS Codes

How do I make an toggle buttton?

What is a toggle buttton? How do you make a toggle buttton? This script and codes were developed by Juwan Petty on 12 October 2022, Wednesday.

Toggle Buttton Previews
IQ Test

Toggle Buttton - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Toggle Buttton</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="toggle"> <i class="material-icons scale-up-icon" id="on">alarm_on</i> <div class="toggle-btn"> <div class="toggle-btn-circle"></div> </div> <i class="material-icons" id="off">alarm_off</i>
</div> <script src="js/index.js"></script>
</body>
</html>

Toggle Buttton - Script Codes CSS Codes

html, body { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; background: #FAFAFA;
}
body { transition: 300ms;
}
.toggle { display: flex; justify-content: center; align-items: center;
}
i { opacity: 0.54;
}
.toggle-btn { background: #76F7BF; height: 50px; width: 100px; border-radius: 50px; margin: 0 20px; cursor: pointer; transition: 300ms;
}
.toggle-btn-circle { height: 46px; width: 46px; background: #5FDD9D; position: relative; top: 1.5px; left: 2px; display: inline-block; opacity: 1; border-radius: 25px; transition: 300ms;
}
.material-icons { transition: 300ms;
}
.scale-up-icon { transform: scale(1.5);
}
@keyframes option-left { from { left: 2px } to { left: 51px }
}
@keyframes option-left-reverse { to { left: 2px } from { left: 51px }
}

Toggle Buttton - Script Codes JS Codes

var count = 0;
$(document).ready(function() { $('.toggle-btn').click(function() { if (count == 0) { $('.toggle-btn-circle').css("animation", "option-left 150ms ease-in-out 0s 1 forwards"); $('#off').addClass('scale-up-icon'); $('#on').removeClass('scale-up-icon'); $('.toggle-btn').css("background", "#F3F3F3"); $('.toggle-btn-circle').css("background", "#C1C1C1"); count = 1; } else if (count == 1) { $('.toggle-btn-circle').css("animation", "option-left-reverse 150ms ease-in-out 0s 1 forwards"); $('#off').removeClass('scale-up-icon'); $('#on').addClass('scale-up-icon'); $('.toggle-btn').css("background", "#76F7BF"); $('.toggle-btn-circle').css("background", "#5FDD9D"); count = 0; } });
});
Toggle Buttton - Script Codes
Toggle Buttton - Script Codes
Home Page Home
Developer Juwan Petty
Username juwanpetty
Uploaded October 12, 2022
Rating 3
Size 2,227 Kb
Views 16,192
Do you need developer help for Toggle Buttton?

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!

Juwan Petty (juwanpetty) Script Codes
Name
Flexbox Card Layout
Flexbox Split Screen
Simple Navigation Bar
Udacity Button Style
A CSS Menu Toggle using jQuery
A Pen by Juwan Petty
A Fun Little Button
Animated Random Phrase
Design Method for Perfect Padding
Simple Button Animation
Create amazing love letters 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!