Pure CSS Off Canvas Icon

Developer
Dang Van Thanh
Size
1,944 Kb
Views
22,264
  1. Pure CSS Off Canvas Icon Previews
  2. Pure CSS Off Canvas Icon HTML Codes
  3. Pure CSS Off Canvas Icon CSS Codes

How do I make an pure css off canvas icon?

What is a pure css off canvas icon? How do you make a pure css off canvas icon? This script and codes were developed by Dang Van Thanh on 13 September 2022, Tuesday.

Pure CSS Off Canvas Icon Previews
IQ Test

Pure CSS Off Canvas Icon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Off Canvas Icon</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>	<div class="canvas">	<div><span class="round"></span><span class="line"></span></div>	<div><span class="round"></span><span class="line"></span></div>	<div><span class="round"></span><span class="line"></span></div>	</div>
</body>
</html>

Pure CSS Off Canvas Icon - Script Codes CSS Codes

.canvas { box-sizing: border-box; cursor: pointer;
}
.canvas > div { margin-top: -3px;
}
.canvas > div > span { border: 3px solid #dc4040; display: inline-block; vertical-align: middle; transition: border .5s ease;
}
.canvas .round { width: 10px; height: 10px; margin-right: 3px; border-radius: 100%;
}
.canvas .line { width: 40px; border-radius: 2px;
}
.canvas:hover .round, .canvas:hover .line { border: 3px solid #4260ae;
}
Pure CSS Off Canvas Icon - Script Codes
Pure CSS Off Canvas Icon - Script Codes
Home Page Home
Developer Dang Van Thanh
Username dangvanthanh
Uploaded September 13, 2022
Rating 3
Size 1,944 Kb
Views 22,264
Do you need developer help for Pure CSS Off Canvas Icon?

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!

Dang Van Thanh (dangvanthanh) Script Codes
Name
Translate in CSS3 2D Transform
Tooltips using CSS Triangles Mixin
Long Shadow CSS3 in Sass
Equal Height Block of Element
CSS3 Multi-Column Module 1
Scale in CSS3 Transform
Skew in CSS3 Transform
Simple Navigation and Transition
Simple Carousel Pure CSS
Browser Pure CSS3
Create amazing Facebook ads 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!