Cool toggle with filling effect

Developer
Gabriel
Size
2,499 Kb
Views
28,336
  1. Cool toggle with filling effect Previews
  2. Cool toggle with filling effect HTML Codes
  3. Cool toggle with filling effect CSS Codes
  4. Cool toggle with filling effect JS Codes

How do I make an cool toggle with filling effect?

Inspired by the HD-toggle of vimeo -made with text stroke, background position, css3 transitions and a little bit jquery ;). What is a cool toggle with filling effect? How do you make a cool toggle with filling effect? This script and codes were developed by Gabriel on 18 July 2022, Monday.

Cool toggle with filling effect Previews
IQ Test

Cool toggle with filling effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>cool toggle with filling effect</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Raleway:100,900'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background-color: #444;
}
.hd { margin: 50px auto; width: 500px; height: 180px; text-align: center; font-family: 'Raleway', sans-serif; font-weight: 900; text-stroke: 5px #eee; color: transparent; font-size: 180px; font-style: italic; letter-spacing: -10px; background: linear-gradient( to bottom, transparent 0%, transparent 49%, #eeeeee 50%, #eeeeee 100% ); background-size: 100% 205%; -webkit-background-clip: text; background-clip: text; transition: background .75s; cursor: pointer;
}
.hd-click { background-position: 100% 100%;
}
.info { position: absolute; right: 3px; top: 3px; font-size: 13px; color: #ccc; font-family: 'Raleway', sans-serif; font-weight: 100;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="hd">HD</div>
<div class="info">(click on HD)</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Cool toggle with filling effect - Script Codes CSS Codes

body { background-color: #444;
}
.hd { margin: 50px auto; width: 500px; height: 180px; text-align: center; font-family: 'Raleway', sans-serif; font-weight: 900; text-stroke: 5px #eee; color: transparent; font-size: 180px; font-style: italic; letter-spacing: -10px; background: linear-gradient( to bottom, transparent 0%, transparent 49%, #eeeeee 50%, #eeeeee 100% ); background-size: 100% 205%; -webkit-background-clip: text; background-clip: text; transition: background .75s; cursor: pointer;
}
.hd-click { background-position: 100% 100%;
}
.info { position: absolute; right: 3px; top: 3px; font-size: 13px; color: #ccc; font-family: 'Raleway', sans-serif; font-weight: 100;
}

Cool toggle with filling effect - Script Codes JS Codes

$('.hd').click(function(){ $(this).toggleClass('hd-click');
});
Cool toggle with filling effect - Script Codes
Cool toggle with filling effect - Script Codes
Home Page Home
Developer Gabriel
Username gab
Uploaded July 18, 2022
Rating 4
Size 2,499 Kb
Views 28,336
Do you need developer help for Cool toggle with filling effect?

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!

Gabriel (gab) Script Codes
Name
Chrome notifications test
Inline editing with jquery
CSS3 Login
Projects page
HINT.css - just a little test
A clicking cookie gaaaame...
Font awesome Hamburger-Menu-Toggle
Loggy.js - CSS formatted JS console logs
Picture overlay
Replace a not existing img
Create amazing blog posts 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!