css实现5种不同风格的渐变按钮美化效果代码
代码语言：html
所属分类：表单美化
代码描述：css实现5种不同风格的渐变按钮美化效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html lang="en">
<head>
<title>Gradient Buttons Collection</title>
<meta name="description" content="" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<style>
/**
* general styles
*/
html, body{
padding: 0;
margin: 0;
font-family: 'Rubik', '-apple-system', 'Arial', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'sans-serif';
font-weight: 300;
background-color: #fff;
color: #111;
font-size: 1rem;
}
html *{
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
h1, h2, h3, h4, h5{
padding: 0;
margin: 1rem;
text-align: center;
}
h1{
margin-top: 3rem;
font-family: 'Lobster', '-apple-system', 'Arial', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'sans-serif';
font-size: 4rem;
}
h2{
color: #878787;
font-size: 2rem;
margin-bottom: 3rem;
display: none;
}
@media (min-width: 650px){
h1{
font-size: 5rem;
}
h2{
display: block;
}
}
@media (min-width: 850px){
h1{
font-size: 6rem;
}
h2{
font-size: 3rem;
}
}
/**
* section
*/
.section{
padding: 5rem 1rem;
}
.section__title,
.section__desc{
text-align: center;
padding: 0 1rem 1rem 1rem;
margin: 0;
}
.section__title{
font-size: 2.6rem;
margin-bottom: 0.5rem;
}
.section__desc{
font-size: 1.5rem;
color: #ababab;
width: 690px;
max-width: 100%;
margin: auto auto 4rem auto;
line-height: 1.3;
}
.section__buttons{
background-color: #111;
color: #fff;
}
.section__buttons-content{
margin: auto;
width: 1200px;
max-width: 100%;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr;
grid-template-columns: repeat(1, 1fr);
grid-gap: 2rem;
}
@media (min-width: 650px){
.section__buttons-content{
-ms-grid-columns: 1fr 2rem 1fr;
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 850px){
.section{
padding: 7rem 1rem;
}
.section__buttons-content{
-ms-grid-columns: 1fr 2rem 1fr 2rem 1fr;
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 950px){
.section__buttons-content{
-ms-grid-columns: 1fr 2rem 1fr 2rem 1fr 2rem 1fr;
grid-template-columns: repeat(4, 1fr);
}
}
/**
* info section
*/
.info-section{
padding: 1rem;
background: -o-repeating-linear-gradient(150deg, #fff, #fff 10px, #f5f5f5 10px, #f5f5f5 20px);
background: repeating-linear-gradient(300deg, #fff, #fff 10px, #f5f5f5 10px, #f5f5f5 20px);
}
@media (min-width: 650px) {
.info-section{
padding: 3rem 1rem;
}
}
@media (min-width: 850px) {
.info-section{
padding: 6rem 1rem;
}
}
/**
* footer
*/
.footer{
background-color: rgb(29, 29, 29);
background-image: -o-linear-gradient(
273deg, #0e3e60, transparent);
background-image: linear-gradient(
177deg, #0e3e60, transparent);
color: #ccc;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 3rem 1rem;
text-align: center;
}
.footer a{
color: #ccc;
}
.footer__logo{
text-shadow: 0 0 1rem #fff;
}
.footer__part-1,
.footer__part-2{
margin: 0 1rem;
}
.footer__part-1{
margin-bottom: 1rem;
}
.footer__item{
margin: 0 0.5rem;
display: inline-block;
}
@media (min-width: 650px){
.footer{
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.footer__part-1{
margin-bottom: 0;
}
}
/**
* top section
*/
.top-section{
position: relative;
}
/**
* top bar
*/
.top-bar{
background: #fff;
color: #111;
padding: 1rem 2rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.top-bar__logo{
margin-right: 1rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.top-bar__logo img{
width: 2rem;
}
.top-bar__pages{
margin: 0 1rem 0 auto;
list-style: none;
display: none;
}
.top-bar__page a{
margin: 0 1rem;
text-decoration: none;
color: #888;
-webkit-transition: 0.3s color;
-o-transition: 0.3s color;
transition: 0.3s color;
}
.top-bar__page a:hover{
color: #111;
}
@media (min-width: 1020px){
.top-bar__pages{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
/**
* wave
*/
.wave {
height: 2rem;
position: relative;
}
.wave::before,
.wave::after{
content: '';
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
}
.wave::before {
height: 10px;
background-size: 20px 20px;
background-image: -o-radial-gradient(10px -5px, circle, transparent 12px, #111 13px);
background-image: radial-gradient(circle at 10px -5px, transparent 12px, #111 13px);
}
.wave::after {
height: 15px;
background-size: 40px 20px;
background-image: -o-radial-gradient(10px 15px, circle, #111 12px, transparent 13px);
background-image: radial-gradient(circle at 10px 15px, #111 12px, transparent 13px);
}
/**
* features
*/
@media (min-width: 950px){
.features .section__buttons-content{
-ms-grid-columns: 1fr 2rem 1fr 2rem 1fr;
grid-template-columns: repeat(3, 1fr);
}
}
.features__item{
background-color: rgba(154, 198, 197);
background-image: -o-radial-gradient(#fff, transparent);
background-image: radial-gradient(#fff, transparent);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 3rem;
border-radius: 0.3rem;
color: #111;
text-align: center;
line-height: 1.3;
}
.features__item-icon{
margin-bottom: 2rem;
}
.features__item-1{
background-color: rgba(154, 198, 197);
}
.features__item-2{
background-color: rgb(219, 200, 68);
}
.features__item-3{
background-color: rgb(181, 154, 198);
}
.features__item-text{
font-size: 1.2rem;
}
</style>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/gradient-buttons-collection.min.css">
</head>
<body class="bg-white text-gray-900 font-rubik">
<!-- top bar -->
<nav class="top-bar">
<a href="index.html" title="" class="top-bar__logo">
<img src="main/img/favicon/jsocean-192x192.png" alt="JSOcean" title="JSOcean" />
</a>
<ul class="top-bar__pages">
<li class="top-bar__page"><a href="#rounded-gradient-border-buttons" title=""># Rounded</a></li>
<li class="top-bar__page"><a href="#gradient-border-buttons" title=""># Non-Rounded</a></li>
<li class="top-bar__page"><a href="#rounded-xl-gradient-border-buttons" title=""># Rounded-XL</a></li>
<li class="top-bar__page"><a href="#linear-gradient-buttons" title=""># Linear Gradient</a></li>
<li class="top-bar__page"><a href="#radial-gradient-buttons" title=""># Radial Gradient</a></li>
<li class="top-bar__page"><a href="#disabled-buttons" title=""># Disabled</a></li>
</ul>
</nav>
<!-- top section -->
<section class="top-section section">
<h1>Gradient Buttons Collection</h1>
<h2>Beautiful Gradient Buttons UI Kit</h2>
</section>
<div class="wave"></div>
<!-- features -->
<section id="features" class="features section section__buttons">
<h3 class="section__title">CSS Frameworks</h3>
<p class="section__desc">Gradient Buttons Collection supports modern CSS frameworks and with pure CSS.</p>
<div class="section__content section__buttons-content">
<div class="features__item features__item-1">
<span class="features__item-icon features__item-icon-1">
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="50" height="50"><path fill="currentColor" d="M480 32l-64 368-223.3 80L0 400l19.6-94.8h82l-8 40.6L210 390.2l134.1-44.4 18.8-97.1H29.5l16-82h333.7l10.5-52.7H56.3l16.3-82H480z"></path></svg>
</span>
<span class="features__item-text">Vanilla CSS</span>
</div>
<div class="features__item features__item-2">
<span class="features__item-icon features__item-icon-2">
<svg viewBox="0 0 512 407.864" width="63" height="50" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="img"><path d="m106.344 0c-29.214 0-50.831 25.57-49.863 53.3.929 26.641-.278 61.145-8.964 89.283-8.717 28.217-23.449 46.098-47.517 48.393v25.912c24.068 2.3 38.8 20.172 47.516 48.393 8.687 28.138 9.893 62.642 8.964 89.283-.968 27.726 20.649 53.3 49.868 53.3h299.347c29.214 0 50.827-25.57 49.859-53.3-.929-26.641.278-61.145 8.964-89.283 8.717-28.221 23.413-46.1 47.482-48.393v-25.912c-24.068-2.3-38.764-20.172-47.482-48.393-8.687-28.134-9.893-62.642-8.964-89.283.968-27.726-20.645-53.3-49.859-53.3h-299.355zm240.775 251.067c0 38.183-28.481 61.34-75.746 61.34h-80.458a8.678 8.678 0 0 1 -8.678-8.678v-199.593a8.678 8.678 0 0 1 8.678-8.678h80c39.411 0 65.276 21.348 65.276 54.124 0 23.005-17.4 43.6-39.567 47.208v1.2c30.176 3.31 50.495 24.21 50.495 53.077zm-84.519-128.1h-45.876v64.8h38.639c29.87 0 46.34-12.028 46.34-33.527-.003-20.148-14.163-31.273-39.103-31.273zm-45.876 90.511v71.411h47.564c31.1 0 47.573-12.479 47.573-35.931s-16.935-35.484-49.573-35.484h-45.564z" fill="#111927" fill-rule="evenodd"></path></svg>
</span>
<span class="features__item-text">Bootstrap CSS Framework Examples</span>
</div>
<div class="features__item features__item-3">
<span class="features__item-icon features__item-icon-3">
<svg viewBox=".15 .13 799.7 479.69" width="83" height="50" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="img"><path d="m400 .13c-106.63 0-173.27 53.3-199.93 159.89 39.99-53.3 86.64-73.28 139.95-59.96 30.42 7.6 52.16 29.67 76.23 54.09 39.2 39.78 84.57 85.82 183.68 85.82 106.62 0 173.27-53.3 199.92-159.9-39.98 53.3-86.63 73.29-139.95 59.97-30.41-7.6-52.15-29.67-76.22-54.09-39.2-39.78-84.58-85.82-183.68-85.82zm-199.93 239.84c-106.62 0-173.27 53.3-199.92 159.9 39.98-53.3 86.63-73.29 139.95-59.96 30.41 7.61 52.15 29.67 76.22 54.08 39.2 39.78 84.58 85.83 183.68 85.83 106.63 0 173.27-53.3 199.93-159.9-39.99 53.3-86.64 73.29-139.95 59.96-30.42-7.59-52.16-29.67-76.23-54.08-39.2-39.78-84.57-85.83-183.68-85.83z" fill="#111927"></path></svg>
</span>
<span class="features__item-text">Tailwind CSS Framework Examples</span>
</div>
</div>
</section>
<!-- spacer -->
<section class="info-section section"> </section>
<!-- rounded gradient border buttons -->
<section id="rounded-gradient-border-buttons" class="rounded-gradient-border-buttons section section__buttons">
<h3 class="section__title">Rounded Gradient Border Buttons</h3>
<p class="section__desc">This section contains gradient border buttons collection with Font Awesome icons and rounded corners. Each button has four versions: horizontal, vertical, and two diagonals.</p>
<div class="section__content section__buttons-content">
<!-- style 1 -->
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-1">
<span><i class="fas fa-leaf"></i> Style 1-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-1 jso-v-gradient">
<span><i class="fas fa-leaf"></i> Style 1-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-1 jso-d1-gradient">
<span><i class="fas fa-leaf"></i> Style 1-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-1 jso-d2-gradient">
<span><i class="fas fa-leaf"></i> Style 1-D2</span>
</button>
<!-- style 2 -->
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-2">
<span><i class="fab fa-pagelines"></i> Style 2-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-2 jso-v-gradient">
<span><i class="fab fa-pagelines"></i> Style 2-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-2 jso-d1-gradient">
<span><i class="fab fa-pagelines"></i> Style 2-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-2 jso-d2-gradient">
<span><i class="fab fa-pagelines"></i> Style 2-D2</span>
</button>
<!-- style 3 -->
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-3">
<span><i class="fas fa-sun"></i> Style 3-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-3 jso-v-gradient">
<span><i class="fas fa-sun"></i> Style 3-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-3 jso-d1-gradient">
<span><i class="fas fa-sun"></i> Style 3-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-3 jso-d2-gradient">
<span><i class="fas fa-sun"></i> Style 3-D2</span>
</button>
<!-- style 4 -->
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-4">
<span><i class="fas fa-parachute-box"></i> Style 4-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-4 jso-v-gradient">
<span><i class="fas fa-parachute-box"></i> Style 4-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-4 jso-d1-gradient">
<span><i class="fas fa-parachute-box"></i> Style 4-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-4 jso-d2-gradient">
<span><i class="fas fa-parachute-box"></i> Style 4-D2</span>
</button>
<!-- style 5 -->
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-5">
<span><i class="fas fa-umbrella"></i> Style 5-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-5 jso-v-gradient">
<span><i class="fas fa-umbrella"></i> Style 5-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-5 jso-d1-gradient">
<span><i class="fas fa-umbrella"></i> Style 5-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-5 jso-d2-gradient">
<span><i class="fas fa-umbrella"></i> Style 5-D2</span>
</button>
<!-- style 6 -->
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-6">
<span><i class="fas fa-ice-cream"></i> Style 6-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-6 jso-v-gradient">
<span><i class="fas fa-ice-cream"></i> Style 6-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-6 jso-d1-gradient">
<span><i class="fas fa-ice-cream"></i> Style 6-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-6 jso-d2-gradient">
<span><i class="fas fa-ice-cream"></i> Style 6-D2</span>
</button>
<!-- style 7 -->
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-7">
<span><i class="fas fa-fish"></i> Style 7-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-7 jso-v-gradient">
<span><i class="fas fa-fish"></i> Style 7-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-7 jso-d1-gradient">
<span><i class="fas fa-fish"></i> Style 7-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-7 jso-d2-gradient">
<span><i class="fas fa-fish"></i> Style 7-D2</span>
</button>
<!-- style 8 -->
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-8">
<span><i class="fas fa-water"></i> Style 8-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-8 jso-v-gradient">
<span><i class="fas fa-water"></i> Style 8-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-8 jso-d1-gradient">
<span><i class="fas fa-water"></i> Style 8-D1</span></button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-8 jso-d2-gradient">
<span><i class="fas fa-water"></i> Style 8-D2</span>
</button>
<!-- style 9 -->
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-9">
<span><i class="far fa-snowflake"></i> Style 9-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-9 jso-v-gradient">
<span><i class="far fa-snowflake"></i> Style 9-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-9 jso-d1-gradient">
<span><i class="far fa-snowflake"></i> Style 9-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-9 jso-d2-gradient">
<span><i class="far fa-snowflake"></i> Style 9-D2</span>
</button>
<!-- style 10 -->
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-10">
<span><i class="fas fa-star"></i> Style 10-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-10 jso-v-gradient">
<span><i class="fas fa-star"></i> Style 10-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-10 jso-d1-gradient">
<span><i class="fas fa-star"></i> Style 10-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-10 jso-d2-gradient">
<span><i class="fas fa-star"></i> Style 10-D2</span>
</button>
<!-- style 11 -->
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-11">
<span><i class="fas fa-dice"></i> Style 11-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-11 jso-v-gradient">
<span><i class="fas fa-dice"></i> Style 11-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-11 jso-d1-gradient">
<span><i class="fas fa-dice"></i> Style 11-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-11 jso-d2-gradient">
<span><i class="fas fa-dice"></i> Style 11-D2</span>
</button>
<!-- style 12 -->
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-12">
<span><i class="fas fa-mug-hot"></i> Style 12-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-12 jso-v-gradient">
<span><i class="fas fa-mug-hot"></i> Style 12-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-12 jso-d1-gradient">
<span><i class="fas fa-mug-hot"></i> Style 12-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-12 jso-d2-gradient">
<span><i class="fas fa-mug-hot"></i> Style 12-D2</span>
</button>
<!-- style 13 -->
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-13">
<span><i class="fas fa-apple-alt"></i> Style 13-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-13 jso-v-gradient">
<span><i class="fas fa-apple-alt"></i> Style 13-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-13 jso-d1-gradient">
<span><i class="fas fa-apple-alt"></i> Style 13-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-13 jso-d2-gradient">
<span><i class="fas fa-apple-alt"></i> Style 13-D2</span>
</button>
<!-- style 14 -->
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-14">
<span><i class="fas fa-hamburger"></i> Style 14-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-14 jso-v-gradient">
<span><i class="fas fa-hamburger"></i> Style 14-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-14 jso-d1-gradient">
<span><i class="fas fa-hamburger"></i> Style 14-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-14 jso-d2-gradient">
<span><i class="fas fa-hamburger"></i> Style 14-D2</span>
</button>
<!-- style 15 -->
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-15">
<span><i class="fas fa-beer"></i> Style 15-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-15 jso-v-gradient">
<span><i class="fas fa-beer"></i> Style 15-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-15 jso-d1-gradient">
<span><i class="fas fa-beer"></i> Style 15-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-15 jso-d2-gradient">
<span><i class="fas fa-beer"></i> Style 15-D2</span>
</button>
<!-- style 16 -->
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-16">
<span><i class="fas fa-pizza-slice"></i> Style 16-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-16 jso-v-gradient">
<span><i class="fas fa-pizza-slice"></i> Style 16-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-16 jso-d1-gradient">
<span><i class="fas fa-pizza-slice"></i> Style 16-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-rounded jso-color-16 jso-d2-gradient">
<span><i class="fas fa-pizza-slice"></i> Style 16-D2</span>
</button>
</div>
</section>
<!-- spacer -->
<section class="info-section section"> </section>
<!-- gradient border buttons -->
<section id="gradient-border-buttons" class="gradient-border-buttons section section__buttons">
<h3 class="section__title">Gradient Border Buttons</h3>
<p class="section__desc">This section contains gradient border buttons without rounded borders. The gradient direction and other styles can be adjusted with CSS classes.</p>
<div class="section__content section__buttons-content">
<!-- style 1 -->
<button type="button" class="jso-btn jso-outline-btn jso-color-1">
<span><i class="fas fa-leaf"></i> Style 1-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-1 jso-v-gradient">
<span><i class="fas fa-leaf"></i> Style 1-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-1 jso-d1-gradient">
<span><i class="fas fa-leaf"></i> Style 1-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-1 jso-d2-gradient">
<span><i class="fas fa-leaf"></i> Style 1-D2</span>
</button>
<!-- style 2 -->
<button type="button" class="jso-btn jso-outline-btn jso-color-2">
<span><i class="fab fa-pagelines"></i> Style 2-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-2 jso-v-gradient">
<span><i class="fab fa-pagelines"></i> Style 2-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-2 jso-d1-gradient">
<span><i class="fab fa-pagelines"></i> Style 2-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-2 jso-d2-gradient">
<span><i class="fab fa-pagelines"></i> Style 2-D2</span>
</button>
<!-- style 3 -->
<button type="button" class="jso-btn jso-outline-btn jso-color-3">
<span><i class="fas fa-sun"></i> Style 3-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-3 jso-v-gradient">
<span><i class="fas fa-sun"></i> Style 3-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-3 jso-d1-gradient">
<span><i class="fas fa-sun"></i> Style 3-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-3 jso-d2-gradient">
<span><i class="fas fa-sun"></i> Style 3-D2</span>
</button>
<!-- style 4 -->
<button type="button" class="jso-btn jso-outline-btn jso-color-4">
<span><i class="fas fa-parachute-box"></i> Style 4-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-4 jso-v-gradient">
<span><i class="fas fa-parachute-box"></i> Style 4-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-4 jso-d1-gradient">
<span><i class="fas fa-parachute-box"></i> Style 4-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-4 jso-d2-gradient">
<span><i class="fas fa-parachute-box"></i> Style 4-D2</span>
</button>
<!-- style 5 -->
<button type="button" class="jso-btn jso-outline-btn jso-color-5">
<span><i class="fas fa-umbrella"></i> Style 5-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-5 jso-v-gradient">
<span><i class="fas fa-umbrella"></i> Style 5-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-5 jso-d1-gradient">
<span><i class="fas fa-umbrella"></i> Style 5-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-5 jso-d2-gradient">
<span><i class="fas fa-umbrella"></i> Style 5-D2</span>
</button>
<!-- style 6 -->
<button type="button" class="jso-btn jso-outline-btn jso-color-6">
<span><i class="fas fa-ice-cream"></i> Style 6-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-6 jso-v-gradient">
<span><i class="fas fa-ice-cream"></i> Style 6-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-6 jso-d1-gradient">
<span><i class="fas fa-ice-cream"></i> Style 6-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-6 jso-d2-gradient">
<span><i class="fas fa-ice-cream"></i> Style 6-D2</span>
</button>
<!-- style 7 -->
<button type="button" class="jso-btn jso-outline-btn jso-color-7">
<span><i class="fas fa-fish"></i> Style 7-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-7 jso-v-gradient">
<span><i class="fas fa-fish"></i> Style 7-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-7 jso-d1-gradient">
<span><i class="fas fa-fish"></i> Style 7-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-7 jso-d2-gradient">
<span><i class="fas fa-fish"></i> Style 7-D2</span>
</button>
<!-- style 8 -->
<button type="button" class="jso-btn jso-outline-btn jso-color-8">
<span><i class="fas fa-water"></i> Style 8-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-8 jso-v-gradient">
<span><i class="fas fa-water"></i> Style 8-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-8 jso-d1-gradient">
<span><i class="fas fa-water"></i> Style 8-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-8 jso-d2-gradient">
<span><i class="fas fa-water"></i> Style 8-D2</span>
</button>
<!-- style 9 -->
<button type="button" class="jso-btn jso-outline-btn jso-color-9">
<span><i class="far fa-snowflake"></i> Style 9-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-9 jso-v-gradient">
<span><i class="far fa-snowflake"></i> Style 9-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-9 jso-d1-gradient">
<span><i class="far fa-snowflake"></i> Style 9-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-9 jso-d2-gradient">
<span><i class="far fa-snowflake"></i> Style 9-D2</span>
</button>
<!-- style 10 -->
<button type="button" class="jso-btn jso-outline-btn jso-color-10">
<span><i class="fas fa-star"></i> Style 10-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-10 jso-v-gradient">
<span><i class="fas fa-star"></i> Style 10-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-10 jso-d1-gradient">
<span><i class="fas fa-star"></i> Style 10-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-10 jso-d2-gradient">
<span><i class="fas fa-star"></i> Style 10-D2</span>
</button>
<!-- style 11 -->
<button type="button" class="jso-btn jso-outline-btn jso-color-11">
<span><i class="fas fa-dice"></i> Style 11-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-11 jso-v-gradient">
<span><i class="fas fa-dice"></i> Style 11-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-11 jso-d1-gradient">
<span><i class="fas fa-dice"></i> Style 11-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-11 jso-d2-gradient">
<span><i class="fas fa-dice"></i> Style 11-D2</span>
</button>
<!-- style 12 -->
<button type="button" class="jso-btn jso-outline-btn jso-color-12">
<span><i class="fas fa-mug-hot"></i> Style 12-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-12 jso-v-gradient">
<span><i class="fas fa-mug-hot"></i> Style 12-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-12 jso-d1-gradient">
<span><i class="fas fa-mug-hot"></i> Style 12-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-12 jso-d2-gradient">
<span><i class="fas fa-mug-hot"></i> Style 12-D2</span>
</button>
<!-- style 13 -->
<button type="button" class="jso-btn jso-outline-btn jso-color-13">
<span><i class="fas fa-apple-alt"></i> Style 13-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-13 jso-v-gradient">
<span><i class="fas fa-apple-alt"></i> Style 13-V</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-13 jso-d1-gradient">
<span><i class="fas fa-apple-alt"></i> Style 13-D1</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-13 jso-d2-gradient">
<span><i class="fas fa-apple-alt"></i> Style 13-D2</span>
</button>
<!-- style 14 -->
<button type="button" class="jso-btn jso-outline-btn jso-color-14">
<span><i class="fas fa-hamburger"></i> Style 14-H</span>
</button>
<button type="button" class="jso-btn jso-outline-btn jso-color-14 jso-v-gradient">
<span><i class=".........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0