Hover Morphing CSS Line Icons

Developer
Alex Raven
Size
2,576 Kb
Views
50,600
  1. Hover Morphing CSS Line Icons Previews
  2. Hover Morphing CSS Line Icons HTML Codes
  3. Hover Morphing CSS Line Icons CSS Codes
  4. Hover Morphing CSS Line Icons JS Codes

How do I make an hover morphing css line icons?

What is a hover morphing css line icons? How do you make a hover morphing css line icons? This script and codes were developed by Alex Raven on 19 September 2022, Monday.

Hover Morphing CSS Line Icons Previews
IQ Test

Hover Morphing CSS Line Icons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hover Morphing CSS Line Icons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2><small>MORPHING : MINIMAL : CSSiCONS</small>Hover Morphing CSS Line Icons</h2>
<hr>
<a class="cssicon minus" data-morph="minus plus" href="#"><span></span></a>
<a class="cssicon plus" data-morph="plus close" href="#"><span></span></a>
<a class="cssicon hamburger" data-morph="hamburger close" href="#"><span></span></a>
<a class="cssicon close" data-morph="close right" href="#"><span></span></a>
<a class="cssicon down" data-morph="down up" href="#"><span></span></a>
<a class="cssicon up" data-morph="up down" href="#"><span></span></a>
<a class="cssicon right" data-morph="right left" href="#"><span></span></a>
<a class="cssicon left" data-morph="left right" href="#"><span></span></a>
<a class="cssicon search" data-morph="search close" href="#"><span></span></a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Hover Morphing CSS Line Icons - Script Codes CSS Codes

/* Ambient Demo Styles
-------------------------------------------------------------- */
body{font-family:"open sans","helvetica neue",sans-serif;text-align:center;background:#eee radial-gradient(circle,#fff,#bbb) fixed;}
h2{color:#444;font-size:38px;font-weight:300;margin-top:40px;line-height:40px;}
h2 small{display:block;font-size:10px;font-weight:normal;letter-spacing:3.5px;color:#aaa;}
hr{margin:30px auto;width:30px;border:none;height:2px;background:#ddd;}
/* Shared Icon Styles
-------------------------------------------------------------- */
.cssicon{ transition:all .5s ease; background:#333; border-radius:.1em; display:inline-block; height:2em; width:2em; /* adjust font size to scale */ font-size:24px;}
.cssicon:hover{background:#000;}
.cssicon:focus{outline:none;}
.cssicon span,
.cssicon span:before,
.cssicon span:after{ border-radius:.025em; border:0em solid #bbb; background-color:#bbb; height:.1em; display:block; transition:all .3s ease; transition-property:top,bottom,left,right,transform,border-radius;}
.cssicon span{top:1em;left:.5em;width:1em;position:relative;background:transparent;}
.cssicon span:after,
.cssicon span:before{content:"";position:absolute;width:100%;}
/* Individual Icon Styles
-------------------------------------------------------------- */
.minus span{/* default */}
.plus span:before{transform:rotate(90deg);}
.hamburger span{background-color:#aaa;}
.hamburger span:before{top:-.33em;}
.hamburger span:after{top:.33em;}
.close span:before{transform:rotate(45deg);}
.close span:after{transform:rotate(-45deg);}
.down span{width:.8em;left:.6em;}
.down span:before{left:-.25em;transform:rotate(45deg);}
.down span:after{right:-.25em;transform:rotate(-45deg);}
.up span{width:.8em;left:.6em;}
.up span:before{left:.25em;transform:rotate(45deg);}
.up span:after{right:.25em;transform:rotate(-45deg);}
.right span{width:.8em;left:.7em;}
.right span:before{top:-.25em;transform:rotate(45deg);}
.right span:after{bottom:-.25em;transform:rotate(-45deg);}
.left span{width:.8em;}
.left span:before{top:.25em;transform:rotate(45deg);}
.left span:after{bottom:.25em;transform:rotate(-45deg);}
.search span:after{top:.33em;left:.66em;width:.33em;transform:rotate(45deg);}
.search span:before{height:.75em;width:.75em;top:-.5em;border-radius:50%;background:transparent;border-width:.1em;}

Hover Morphing CSS Line Icons - Script Codes JS Codes

$(".cssicon[data-morph]").hover(function(e) { e.preventDefault(); var morphClasses = $(this).data("morph"); $(this).toggleClass(morphClasses);
});
Hover Morphing CSS Line Icons - Script Codes
Hover Morphing CSS Line Icons - Script Codes
Home Page Home
Developer Alex Raven
Username asraven
Uploaded September 19, 2022
Rating 3
Size 2,576 Kb
Views 50,600
Do you need developer help for Hover Morphing CSS Line Icons?

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!

Alex Raven (asraven) Script Codes
Name
CSS3 Content Callouts
Wiki TOC Enumeration with CSS Counters
Fluid Percentage Based Purely CSS3 iMac
Simple Pulsing Image Hover Effect
IMac with scrolling screenshot animation on hover
Media Queries Test Page
AWWWards Inspired Animated Heart Share Icon
A Directory Tree List Style
CSS Counter Auto Numbered Steps
Screen Capture an HTML Element and Save as a Downloadable PNG
Create amazing SEO content 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!