Single L shape element link
How do I make an single l shape element link?
Element is an odd shape and allows only hover inside the element to trigger hover action.. What is a single l shape element link? How do you make a single l shape element link? This script and codes were developed by Brad Bodine on 11 August 2022, Thursday.
Single L shape element link - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Single L shape element link</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="setup">
<!-- Important Stuff -->
<a href="" class="button"> <span class="head"></span>
</a>
<!-- end Important Stuff -->
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Single L shape element link - Script Codes CSS Codes
.button, .head { display: block; background: tomato; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;
}
.head { height: 100px; width: 50px; position: absolute; bottom: 0; left: 0;
}
.button { height: 50px; width: 200px; position: relative;
}
.button:hover { background: #2980b9;
}
.button:hover .head { background: #2980b9;
}
/* Basic Page Setup not required for function */
.setup { margin: 125px auto; width: 125px; height: 125px;
}
Developer | Brad Bodine |
Username | bbodine1 |
Uploaded | August 11, 2022 |
Rating | 3 |
Size | 2,162 Kb |
Views | 38,456 |
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 |
Strike Through | 1,480 Kb |
Figure Flip Card | 3,040 Kb |
A Pen by Brad Bodine | 4,747 Kb |
Flat UI Login Form | 4,780 Kb |
CSS3 Checkbox Styles | 5,580 Kb |
CSS3 Monochrome Icon Set Linkable | 15,485 Kb |
Modular Flip Card | 4,009 Kb |
CSS Arrows | 2,295 Kb |
Single L shape element link | 2,162 Kb |
Simple slanted corner | 2,462 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 |
Polygon Dodecahedron in CSS | Vennsoh | 7,606 Kb |
Out of the blue | Giaco | 2,537 Kb |
Mapbox Directions with geolocation tracking | Pollardld | 5,827 Kb |
Click Based Rotation Demo | Zeaklous | 2,086 Kb |
Emberjs Bootstrap Modal Carousel | Somethingkindawierd | 4,233 Kb |
Vue.js Lazy Loading | Kjbrum | 3,620 Kb |
Fluid Grid 12 | Alexoliverwd | 2,309 Kb |
Ripples in water | Nobitagit | 2,704 Kb |
Social buttons | Flacu | 2,022 Kb |
Canvas Orbital Trails v2 | Jackrugile | 3,421 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!