Close

Toggle Button

This is an example of a simple toggle button, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The menu icon is imported to the code with its URL. The JavaScript functions have been used to implement the expand feature of the toggle button. The body of the form is given a background color of #ffffff. The plus icon is given the styles of width as 100px, cursor as pointer to get the hand cursor effect on a hover event, transition as all .3s ease 0s, height as 100px, background color as #ffe581, border-radius as 50% to get the circle shape, display as flex, and position as relative. The line in the plus icon has the styles of width as 6px, height as 50px, background as #000, and border-radius as 10px. The line takes a transform effect of rotate(90deg) when it’s checked to form the links menu. The menu links are given the styles of color as #fff, font-size as 30px, visibility as hidden to be hidden when inactive, transition as .3s ease 0s and transform as scale(.5). Source: https://codepen.io/knyttneve/pen/rGLxbP

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.