Mobile navigation button
How do I make an mobile navigation button?
A mobile navigation button without any background image, or empty spans done in pure CSS3. What is a mobile navigation button? How do you make a mobile navigation button? This script and codes were developed by Robert on 08 November 2022, Tuesday.
Mobile navigation button - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mobile navigation button</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <span class="btn nav">Navigation</span>
</body>
</html>
Mobile navigation button - Script Codes CSS Codes
html { background: #ecf0f1; text-align: center; padding-top: 150px;
}
.btn { display: inline-block; width: 50px; height: 38px; font: 0/0 a; text-shadow: none; color: transparent; border-radius: 3px; background-color: #c0392b; cursor: pointer; -moz-transition: background-color 0.3s ease-out; -o-transition: background-color 0.3s ease-out; -webkit-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out;
}
.btn:hover { background-color: #e74c3c;
}
.nav { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgiLz48c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgiLz48c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgiLz48c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgiLz48c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC44Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-linear-gradient(270deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 20%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 0.8)); background-image: -webkit-linear-gradient(270deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 20%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 0.8)); background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 20%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 0.8)); background-position: 50% 50%; background-size: 60% 15px; background-repeat: no-repeat;
}
Developer | Robert |
Username | rendro |
Uploaded | November 08, 2022 |
Rating | 3 |
Size | 2,659 Kb |
Views | 18,216 |
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 |
CSS3 Diamond | 1,960 Kb |
Easy pie chart admin panel | 3,369 Kb |
WebGL cube test | 15,142 Kb |
Responsive image grid | 2,345 Kb |
Flexbox slider | 3,459 Kb |
Greeting card | 2,208 Kb |
CSS device icons | 2,360 Kb |
CSS3 Browser | 2,882 Kb |
CSS Slideshow | 1,847 Kb |
CSS vintage filter form images | 2,190 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 |
Tic Tac Toe | Volv | 4,862 Kb |
Expandable Left Side Bar with jQuery animate | Retrofuturistic | 2,483 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
Day 11 - Calendar Card | Arnellebalane | 6,984 Kb |
Simple Buttons | Haydenmills | 1,750 Kb |
Week7 replicate | Hwcasis | 1,620 Kb |
P5.js data visualization | Enginarslan | 2,233 Kb |
Nice responsive team page | Infomiho | 3,139 Kb |
Website Concept | Sagoza | 3,104 Kb |
My Starter Kit For Codepen | Dkdesign | 2,012 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!