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 |
Batman Middle Finger | 3,152 Kb |
Animated SVG Hexagon | 3,470 Kb |
Animated multi-line underline | 3,247 Kb |
Canvas Hero Prototype | 3,070 Kb |
Node DC Animated SVG Logo | 4,055 Kb |
Diagonal gradient fill button | 4,860 Kb |
Cube of cubes | 6,112 Kb |
Slanty Button Mixin | 4,109 Kb |
3D Retro Wave Spin | 5,825 Kb |
SVG hamburger menu button | 2,602 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 |
Plotting Points with D3.js | Laurakelly | 31,996 Kb |
Jochaho Skeleton | Dhanushbadge | 1,689 Kb |
Canvas stripes | Adrianparr | 1,948 Kb |
Pomodoro Clock | Osycon | 3,705 Kb |
Webkit decolorize | Fivera | 1,675 Kb |
Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
Project_one | MOHIM | 9,592 Kb |
Fluid Responsive Typography | Jonmilner | 4,205 Kb |
Fullscreen Parallax | Bassta | 3,313 Kb |
Testimonial Fancy tabs responsive | Amit-webdesigner | 3,056 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!