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 -->
    .........完整代码请登录后点击上方下载按钮下载查看