Rotating Button

Developer
Michael Lee
Size
3,534 Kb
Views
6,072
  1. Rotating Button Previews
  2. Rotating Button HTML Codes
  3. Rotating Button CSS Codes
  4. Rotating Button JS Codes

How do I make an rotating button?

Rotating button menu used for my personal site's mobile menu - https://michaelsoolee.comEdit (2015-03-03). What is a rotating button? How do you make a rotating button? This script and codes were developed by Michael Lee on 20 January 2023, Friday.

Rotating Button Previews
IQ Test

Rotating Button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Rotating Button</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="SiteHeader"> <nav role='navigation' class="SiteHeader-nav"> <ul> <li><a href="javascript:;">Home</a></li> <li><a href="javascript:;">About</a></li> <li><a href="javascript:;">Clients</a></li> <li><a href="javascript:;">Contact Us</a></li> </ul> </nav> <h1 class="SiteHeader-branding">Click Button</h1> <a href="#" class="trigger"></a>
</header> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Rotating Button - Script Codes CSS Codes

html, body { margin: 0; padding: 0; font-family: 'Source Sans Pro', sans-serif;
}
a { text-decoration: none; color: #333; padding: 0 0 1px; border-bottom: 1px solid #d9d9d9; -webkit-transition: border 0.3s ease; -moz-transition: border 0.3s ease; transition: border 0.3s ease;
}
a:hover { border-bottom: 1px solid #FB8671;
}
.SiteHeader-branding { font-weight: 100; text-transform: uppercase; letter-spacing: 0.25em;
}
a.trigger { height: 41px; width: 41px; display: block; margin: 0 auto; border: 1px solid #333; position: relative; border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; -webkit-transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
a.trigger:before { content: ''; height: 1px; width: 27px; background: #333; top: 20px; margin: 0 auto; left: 7px; position: absolute; display: inline-block; -webkit-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
a.trigger:after { content: ''; width: 1px; height: 27px; background: #333; position: absolute; display: inline-block; left: 50%; /* Position fix by @halfzebra - https://codepen.io/halfzebra/ */ top: 7px; -webkit-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
header { text-align: center;
}
.SiteHeader.is-open a.trigger { -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); transform: rotate(225deg);
}
.SiteHeader.is-open a.trigger:before { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg);
}
.SiteHeader.is-open a.trigger:after { background: rgba(255, 255, 255, 0); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
}
.SiteHeader-nav { background: #17C6BF; width: 100%; text-align: center; height: 0px; overflow: hidden; -webkit-transition: height 0.7s ease; -moz-transition: height 0.7s ease; transition: height 0.7s ease;
}
.SiteHeader-nav ul { margin: 0; padding: 0; list-style: none;
}
.SiteHeader-nav li { font-size: 1.125em; text-transform: uppercase;
}
.SiteHeader-nav li a { padding: 16px 0; display: block; font-weight: 700; letter-spacing: 0.375em; color: #fff; border: none;
}
header.is-open nav { height: 220px;
}
.Plug { margin: 1rem 0 0; text-align: center;
}

Rotating Button - Script Codes JS Codes

$(function(){ $('a.trigger').on('click', function(){ $('.SiteHeader').toggleClass('is-open'); });
});
/* Rotating Button michaellee / 2014-02-08 https://michaelsoolee.com
*/
Rotating Button - Script Codes
Rotating Button - Script Codes
Home Page Home
Developer Michael Lee
Username michaellee
Uploaded January 20, 2023
Rating 4.5
Size 3,534 Kb
Views 6,072
Do you need developer help for Rotating 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!

Michael Lee (michaellee) Script Codes
Name
Hidden Social Media Share Buttons
X Mobile Menu
Admin Dropdown Menu
SVG Hearts
Reveal password toggle
A Pen by Michael Lee
My Daily Routine Visualized
Current time clock icon
IOS Messages Typing Bubble
Stop Using Corner Banners
Create amazing captions 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!