IbrahimJabbari-Effect18
How do I make an ibrahimjabbari-effect18?
Creative Link Effects. What is a ibrahimjabbari-effect18? How do you make a ibrahimjabbari-effect18? This script and codes were developed by Ibrahim Jabbari on 12 August 2022, Friday.
IbrahimJabbari-Effect18 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>IbrahimJabbari-Effect18</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="ij-effect-18"> <a href="#" data-hover="Effect 18">Effect 18</a>
</nav>
</body>
</html>
IbrahimJabbari-Effect18 - Script Codes CSS Codes
body { font-family: 'Raleway', sans-serif; text-align: center; background-color: #f1790f;
}
nav a { position: relative; display: inline-block; margin: 45px 25px; outline: none; color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; text-shadow: 0 0 1px rgba(255,255,255,0.3); font-size: 1.35em;
}
nav a:hover,
nav a:focus { outline: none;
}
.ij-effect-18 { position: relative; z-index: 1;
}
.ij-effect-18 a { padding: 0 5px; color: #956106; font-weight: 700; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s;
}
.ij-effect-18 a::before,
.ij-effect-18 a::after { position: absolute; width: 100%; left: 0; top: 50%; height: 2px; margin-top: -1px; background: #956106; content: ''; z-index: -1; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; pointer-events: none;
}
.ij-effect-18 a::before { -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); transform: translateY(-20px);
}
.ij-effect-18 a::after { -webkit-transform: translateY(20px); -moz-transform: translateY(20px); transform: translateY(20px);
}
.ij-effect-18 a:hover,
.ij-effect-18 a:focus { color: #fff;
}
.ij-effect-18 a:hover::before,
.ij-effect-18 a:hover::after,
.ij-effect-18 a:focus::before,
.ij-effect-18 a:focus::after { opacity: 0.7;
}
.ij-effect-18 a:hover::before,
.ij-effect-18 a:focus::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);
}
.ij-effect-18 a:hover::after,
.ij-effect-18 a:focus::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg);
}
/* Read more: ibrahimjabbari.com
Developer | Ibrahim Jabbari |
Username | ibrahimjabbari |
Uploaded | August 12, 2022 |
Rating | 3 |
Size | 1,942 Kb |
Views | 42,504 |
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 |
Five Simple Hover Effects for Your Navigation Links | 2,737 Kb |
IbrahimJabbari-Effect3 | 1,788 Kb |
IbrahimJabbari-Effect14 | 1,919 Kb |
IbrahimJabbari-Effect16 | 1,863 Kb |
IbrahimJabbari-Effect2 | 5,945 Kb |
CSS3 Image Hover Effects | 2,198 Kb |
IbrahimJabbari-Effect13 | 1,833 Kb |
IbrahimJabbari-Effect1 | 1,792 Kb |
IbrahimJabbari-Effect17 | 1,902 Kb |
IbrahimJabbari-Effect19 | 5,990 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 |
Rows with image hover effect | Amit-webdesigner | 12,875 Kb |
Filter inputs | Rowinf | 1,721 Kb |
Blog | Rottingroom | 1,430 Kb |
Portfolio Layout Flex | Lahvjal | 3,489 Kb |
Ball physics | Blackkbot | 3,874 Kb |
Dragonball Dragon Radar | DouglasGlover | 2,157 Kb |
SVG Animation | Thepheer | 4,793 Kb |
Clock Face Idea | Chrisburnell | 3,196 Kb |
TinFoil Boats | Chandralil | 4,577 Kb |
Elephants Full screen site | Orrinward | 3,981 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!