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 Previews
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
| Developer | Eli Fitch |
| Username | elifitch |
| Uploaded | October 28, 2022 |
| Rating | 4.5 |
| Size | 4,860 Kb |
| Views | 18,216 |
Do you need developer help for Diagonal gradient fill button?
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!
Eli Fitch (elifitch) Script Codes
| Name | Size |
| Goodbye 2016 | 5,786 Kb |
| Batman Middle Finger | 3,152 Kb |
| Canvas Hero Prototype | 3,070 Kb |
| Cube of cubes | 6,112 Kb |
| Slanty Button Mixin | 4,109 Kb |
| Flexslider thumbnail modification | 13,431 Kb |
| Mars | 3,817 Kb |
| Gradient Borders Mixin | 3,394 Kb |
| Vanilla JS sticky header | 1,944 Kb |
| Node DC Animated SVG Logo | 4,055 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| Sass Radar | Jlong | 6,887 Kb |
| Using Flickr API | MoyArt | 6,761 Kb |
| Loading... | Adamjacob | 2,384 Kb |
| Mesmerizing octopus | Jllodra | 3,549 Kb |
| CSS3 Latte Art Logo | Esambino | 2,036 Kb |
| Coming Soon | MariamMassadeh | 1,680 Kb |
| A Pen by Matt Popovich | Mpopv | 3,349 Kb |
| Wip elementary os navbar | Nickcolley | 2,993 Kb |
| Commuter Line Tokyu 8500 | Pedox | 7,031 Kb |
| Single element checkbox | Ivijaygupta | 1,996 Kb |
Do you want hide your ip address?
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!