Diagonal gradient fill button
How do I make an diagonal gradient fill button?
A button with a fanseh diagonal gradient fill. Made from magic and honey nut cheerios.. What is a diagonal gradient fill button? How do you make a diagonal gradient fill button? This script and codes were developed by Eli Fitch on 28 October 2022, Friday.
Diagonal gradient fill button - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Diagonal gradient fill button</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <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! */ @font-face { font-family: 'agency'; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.ttf");
}
* { box-sizing: border-box; -webkit-font-smoothing: antialiased;
}
html { font-size: 30px;
}
body { background-color: #333;
}
.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.button { color: #fff; display: inline-block; width: 7em; text-align: center; padding: 1em 0em; text-decoration: none; position: relative; font-family: 'agency'; text-transform: uppercase;
}
.button--border { transition: all 0.4s; border: none; background-repeat: no-repeat; background-image: linear-gradient(to left, #6AF0DB 0%, #5FB4F0 100%), linear-gradient(to bottom, #6AF0DB 0%, #6AF0DB 100%), linear-gradient(to right, #5FB4F0 0%, #6AF0DB 100%), linear-gradient(to top, #5FB4F0 0%, #5FB4F0 100%); overflow: hidden; z-index: 1; background-position: 0 0, 100% 0, 100% 100%, 0 100%; background-size: 0% 3px, 3px 0%, 0% 3px, 3px 0%;
}
.button--border.in { background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
}
.button--border.in:after { opacity: 0; transition: 0s all; content: ''; display: block; position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-repeat: no-repeat; background-image: linear-gradient(to left, #6AF0DB 0%, #5FB4F0 100%), linear-gradient(to bottom, #6AF0DB 0%, #6AF0DB 100%), linear-gradient(to right, #5FB4F0 0%, #6AF0DB 100%), linear-gradient(to top, #5FB4F0 0%, #5FB4F0 100%); background-position: 0 0, 100% 0, 100% 100%, 0 100%; background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
}
.button--border.ready:after { opacity: 1;
}
.button--border:before { content: ''; position: absolute; height: 400%; width: 0%; transform-origin: center; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); background-image: linear-gradient(to left, #6AF0DB 0%, #5FB4F0 100%); transition: all 0.4s; z-index: -1;
}
.button--border:hover { letter-spacing: 0.1em; cursor: pointer;
}
.button--border:hover:before { width: 100%;
}
.button--svg { color: #fff; padding: 1em 3em; border: none; position: relative; display: inline-block;
}
.button--svg:hover rect { stroke-width: 5; stroke-dasharray: 15, 200; stroke-dashoffset: 48;
}
.button--svg svg { position: absolute; top: 0; left: 0; height: 100%; width: 100%;
}
.button--svg rect { stroke-width: 6px; stroke-dasharray: 700, 0; transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}
@keyframes enter { 0% { stroke-dashoffset: 700; } 100% { stroke-dashoffset: 0; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container">
<!-- <div class="input"> <input class="input__input" type="text" placeholder="CSS gradient borders..."> <div class="input__bg"></div> </div> --> <a class="button button--border in"> Explore </a>
<!-- <a href="" class="button button--svg"> svg <svg> <defs> <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#50c56c"/> <stop offset="100%" stop-color="#4ec4ce"/> </linearGradient> </defs> <rect x="0" y="0" fill="none" width="100%" height="100%" stroke="url(#linear)"/> </svg> </a> -->
</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>
Diagonal gradient fill button - Script Codes CSS Codes
@font-face { font-family: 'agency'; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.ttf");
}
* { box-sizing: border-box; -webkit-font-smoothing: antialiased;
}
html { font-size: 30px;
}
body { background-color: #333;
}
.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.button { color: #fff; display: inline-block; width: 7em; text-align: center; padding: 1em 0em; text-decoration: none; position: relative; font-family: 'agency'; text-transform: uppercase;
}
.button--border { transition: all 0.4s; border: none; background-repeat: no-repeat; background-image: linear-gradient(to left, #6AF0DB 0%, #5FB4F0 100%), linear-gradient(to bottom, #6AF0DB 0%, #6AF0DB 100%), linear-gradient(to right, #5FB4F0 0%, #6AF0DB 100%), linear-gradient(to top, #5FB4F0 0%, #5FB4F0 100%); overflow: hidden; z-index: 1; background-position: 0 0, 100% 0, 100% 100%, 0 100%; background-size: 0% 3px, 3px 0%, 0% 3px, 3px 0%;
}
.button--border.in { background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
}
.button--border.in:after { opacity: 0; transition: 0s all; content: ''; display: block; position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-repeat: no-repeat; background-image: linear-gradient(to left, #6AF0DB 0%, #5FB4F0 100%), linear-gradient(to bottom, #6AF0DB 0%, #6AF0DB 100%), linear-gradient(to right, #5FB4F0 0%, #6AF0DB 100%), linear-gradient(to top, #5FB4F0 0%, #5FB4F0 100%); background-position: 0 0, 100% 0, 100% 100%, 0 100%; background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
}
.button--border.ready:after { opacity: 1;
}
.button--border:before { content: ''; position: absolute; height: 400%; width: 0%; transform-origin: center; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); background-image: linear-gradient(to left, #6AF0DB 0%, #5FB4F0 100%); transition: all 0.4s; z-index: -1;
}
.button--border:hover { letter-spacing: 0.1em; cursor: pointer;
}
.button--border:hover:before { width: 100%;
}
.button--svg { color: #fff; padding: 1em 3em; border: none; position: relative; display: inline-block;
}
.button--svg:hover rect { stroke-width: 5; stroke-dasharray: 15, 200; stroke-dashoffset: 48;
}
.button--svg svg { position: absolute; top: 0; left: 0; height: 100%; width: 100%;
}
.button--svg rect { stroke-width: 6px; stroke-dasharray: 700, 0; transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}
@keyframes enter { 0% { stroke-dashoffset: 700; } 100% { stroke-dashoffset: 0; }
}
Diagonal gradient fill button - Script Codes JS Codes
$('.button--border').removeClass('in');
$(document).ready(function() { setTimeout(function() { $('.button--border').addClass('in'); setTimeout(function() { $('.button--border').addClass('ready'); },500) },1000)
})
//0065bd 00686b
![Diagonal gradient fill button - Script Codes](http://shots.codepen.io/elifitch/pen/GZZqEx-512.jpg)
Developer | Eli Fitch |
Username | elifitch |
Uploaded | October 28, 2022 |
Rating | 4.5 |
Size | 4,860 Kb |
Views | 18,216 |
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 |
Vanilla JS sticky header | 1,944 Kb |
Smiley guy | 3,845 Kb |
Animated multi-line underline | 3,247 Kb |
Mars | 3,817 Kb |
Flexslider thumbnail modification | 13,431 Kb |
Batman Middle Finger | 3,152 Kb |
Slanty Button Mixin | 4,109 Kb |
Cube of cubes | 6,112 Kb |
SVG hamburger menu button | 2,602 Kb |
3D Retro Wave Spin | 5,825 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 |
Haml Calendar | Katydecorah | 5,643 Kb |
Slide like Mailbox | Hmps | 3,758 Kb |
Slide out Menu | Rbiggs | 4,936 Kb |
Force Counter | Kenlauguico | 2,732 Kb |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 Kb |
Pure CSS Tooltips | Mobius1 | 2,271 Kb |
RSW | JordanC | 3,726 Kb |
Free css icon set v2 - one div | Ben_jammin | 0 Kb |
Box-sizing | Elad2412 | 1,572 Kb |
A Pen by aleen42 | Aleen42 | 11,473 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!