css实现5种不同风格的渐变按钮美化效果代码-html代码-BFW代码库

代码语言：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">&nbsp;</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-slic.........完整代码请登录后点击上方下载按钮下载查看