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 |
Foundation Full Width Rows | 2,548 Kb |
Blockequote Cite line with text | 2,551 Kb |
Tile Slanted Corner | 2,198 Kb |
Simple JSON | 2,247 Kb |
Simple slanted corner | 2,462 Kb |
A Pen by Brad Bodine | 4,747 Kb |
Login form using HTML5 and CSS3 | 3,652 Kb |
CSS3 Checkbox Slider | 2,697 Kb |
CSS Arrows | 2,295 Kb |
CSS3 Checkbox Styles | 5,580 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 |
Caputre Cam with JS | KimmoCommit | 2,795 Kb |
Slider css only | Armandobau | 2,161 Kb |
Spinners using Font Icons | Keyamoon | 3,007 Kb |
Break Out | AzazelN28 | 12,431 Kb |
TheCalendar.js | The-teacher | 6,330 Kb |
A Bouncy Menu Toggle | Billyysea | 4,563 Kb |
Exploding Text | Jjmartucci | 4,749 Kb |
Sinclair Research Computers | MattCowley | 3,068 Kb |
Importable Clearfix | Corysimmons | 1,411 Kb |
IPhone5S SVG Space Grey | Onlinechris | 75,035 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!