Hover Button - codevember 03 - 2016

Developer
Caio Cares
Size
2,207 Kb
Views
10,120
  1. Hover Button - codevember 03 - 2016 Previews
  2. Hover Button - codevember 03 - 2016 HTML Codes
  3. Hover Button - codevember 03 - 2016 CSS Codes

How do I make an hover button - codevember 03 - 2016?

What is a hover button - codevember 03 - 2016? How do you make a hover button - codevember 03 - 2016? This script and codes were developed by Caio Cares on 20 January 2023, Friday.

Hover Button - codevember 03 - 2016 Previews
IQ Test

Hover Button - codevember 03 - 2016 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hover Button - codevember 03 - 2016</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="menu"> <span class="line"></span> <span class="line"></span> <span class="line"></span>
</div>
</body>
</html>

Hover Button - codevember 03 - 2016 - Script Codes CSS Codes

body { background: #202020;
}
#menu { width: 60px; height: 60px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; background: #3A506B; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; overflow: hidden; cursor: pointer;
}
#menu:before { content: ''; width: 0px; height: 60px; position: absolute; top: 0; left: 0; background: #6F7F93; z-index: 1; -webkit-transition: width 0.5s ease-in-out; transition: width 0.5s ease-in-out;
}
#menu .line { width: 30px; height: 4px; background: white; border-radius: 50px; float: left; margin: 0 0 5px 15px; position: relative; z-index: 2; transition: width 0.4s ease-in-out;
}
#menu .line:first-child { margin-top: 18px; transition: width 0.2s ease-in-out;
}
#menu .line:last-child { transition: width 0.6s ease-in-out;
}
#menu:hover:before { width: 70%; height: 60px;
}
#menu:hover .line { width: 20px;
}
Hover Button - codevember 03 - 2016 - Script Codes
Hover Button - codevember 03 - 2016 - Script Codes
Home Page Home
Developer Caio Cares
Username caiocares
Uploaded January 20, 2023
Rating 3
Size 2,207 Kb
Views 10,120
Do you need developer help for Hover Button - codevember 03 - 2016?

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!

Caio Cares (caiocares) Script Codes
Name
Motion Lines - codevember - 02 - 2016
BlendMode - codevember 05 - 2016
Mountains - codevember 04 - 2016
Gameboy - codevember 06 - 2016
Calculator - codevember 08 - 2016
A Pen by Caio Cares
Vertical Menu - codevember 07 - 2016
Batman - codevember 01 - 2016
Travel App - codevember 09 - 2016
Login UI
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!