Lovely Transforming Menu Button
How do I make an lovely transforming menu button?
What is a lovely transforming menu button? How do you make a lovely transforming menu button? This script and codes were developed by Keith Pickering on 10 August 2022, Wednesday.
Lovely Transforming Menu Button - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Lovely Transforming Menu Button</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/qjanh.css'> <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! */ body { padding: 50px; background-color: white;
}
.menu-toggle { display: inline-block; position: relative; width: 80px; height: 80px; padding: 16px; background: #dde4e6; border-radius: 4px; transition: all 0.15s;
}
.menu-toggle:hover, .menu-toggle:focus { background-color: #ecf0f1; box-shadow: 0 0 0 4px #dde4e6;
}
.menu-toggle:active { transform: scale(0.8);
}
.menu-toggle:before, .menu-toggle:after { position: absolute; display: block; content: ""; width: 48px; height: 8px; background-color: #a3b6bb; border-radius: 2px;
}
.menu-toggle:before { top: 20px; transition: all 0.35s ease-out;
}
.menu-toggle:after { top: 36px; box-shadow: 0 16px #aaa; transition: all 0.45s ease-out;
}
.menu-toggle--open { background-color: #e74c3c; box-shadow: 0 0 0 4px #f3a69e;
}
.menu-toggle--open:hover, .menu-toggle--open:focus { background-color: #eb6759; box-shadow: 0 0 0 4px #f3a69e;
}
.menu-toggle--open:before, .menu-toggle--open:after { top: 50%; margin-top: -4px; background-color: #fff;
}
.menu-toggle--open:before { transform: rotate(45deg);
}
.menu-toggle--open:after { transform: rotate(-45deg); box-shadow: none;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <a href="#" class="menu-toggle"> <span class="accessibility">Toggle menu</span>
</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>
Lovely Transforming Menu Button - Script Codes CSS Codes
body { padding: 50px; background-color: white;
}
.menu-toggle { display: inline-block; position: relative; width: 80px; height: 80px; padding: 16px; background: #dde4e6; border-radius: 4px; transition: all 0.15s;
}
.menu-toggle:hover, .menu-toggle:focus { background-color: #ecf0f1; box-shadow: 0 0 0 4px #dde4e6;
}
.menu-toggle:active { transform: scale(0.8);
}
.menu-toggle:before, .menu-toggle:after { position: absolute; display: block; content: ""; width: 48px; height: 8px; background-color: #a3b6bb; border-radius: 2px;
}
.menu-toggle:before { top: 20px; transition: all 0.35s ease-out;
}
.menu-toggle:after { top: 36px; box-shadow: 0 16px #aaa; transition: all 0.45s ease-out;
}
.menu-toggle--open { background-color: #e74c3c; box-shadow: 0 0 0 4px #f3a69e;
}
.menu-toggle--open:hover, .menu-toggle--open:focus { background-color: #eb6759; box-shadow: 0 0 0 4px #f3a69e;
}
.menu-toggle--open:before, .menu-toggle--open:after { top: 50%; margin-top: -4px; background-color: #fff;
}
.menu-toggle--open:before { transform: rotate(45deg);
}
.menu-toggle--open:after { transform: rotate(-45deg); box-shadow: none;
}
Lovely Transforming Menu Button - Script Codes JS Codes
$(function() { var $menuToggle = $(".menu-toggle"); $menuToggle.click(function(e) { e.preventDefault(); $(this).toggleClass("menu-toggle--open"); });
});
Developer | Keith Pickering |
Username | keithpickering |
Uploaded | August 10, 2022 |
Rating | 4.5 |
Size | 11,445 Kb |
Views | 34,408 |
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!
Name | Size |
Easy Container-Breaking Sidebar | 4,673 Kb |
Windows 10 Concept | 16,180 Kb |
CSS Business Card | 185,152 Kb |
Metro Interactive Live Tiles | 5,953 Kb |
Image with inset shadow | 2,311 Kb |
Reusable Styles | 11,486 Kb |
Text Inputs with Sliding Labels | 2,892 Kb |
Delicious SASS Buttons | 8,496 Kb |
Sliding Navigation Menu | 3,440 Kb |
Notifications | 5,681 Kb |
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!
Name | Username | Size |
Flat buttons for Eliassen.com | Kdooley89 | 1,737 Kb |
Slide In Panel | Vikvarg | 2,811 Kb |
CSS Bot Confusion | Jpod | 3,456 Kb |
Sass Radar | Jlong | 6,887 Kb |
Image Hover | Johnheiner | 3,409 Kb |
Wikipedia API | Coderpilot | 2,802 Kb |
CSS Colors | Alexpate | 2,232 Kb |
CSS 3D Radio buttons | Andreasnylin | 1,650 Kb |
Magnus 3 | ARocketfish | 7,944 Kb |
CSS3 Fullscreen Background Slideshow | Leetech | 3,435 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!