different styles of button | CSS | linear gradient

different styles of button in html | css | linear gradient background

Buttons in website, web application, or any blog, which are very important to attract the people to get click on the button without giving time to read. The button is mostly used for digital marketing in the internet world.
In below, I give all the button CSS file.
style.css

 .global-warming-btn{
        
        background-color :'#20bf55';
        background-image: linear-gradient(315deg, #20bf55 0%, #01baef 74%);
        font-family:  'Roboto';
        color:white;
        font-size:13px;
        padding:10px 15px;
        border-radius:3px;
        text-decoration: none;
        cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
        
    }
    .global-warming-btn:hover{
        background-image: linear-gradient(315deg, #20bf55 0%, #01aaef 74%);
        
    }

    .violet-stock{
        background-color: #0cbaba;
        background-image: linear-gradient(315deg, #0cbaba 0%, #380036 74%);
        font-family: 'Roboto';
        color:white;
        font-size:13px;
        padding:10px 15px;
        border-radius:3px;
        text-decoration: none;
        cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
    }
    .violet-stock:hover{
        background-image: linear-gradient(315deg, #0caaba 0%, #370036 74%);
    }
    .girly-pink{
        background-color: #eec0c6;
        background-image: linear-gradient(315deg, #eec0c6 30%, #7ee8fa 74%);
        font-family: 'Roboto';
        color:#696969;
        font-size:13px;
        padding:10px 15px;
        border-radius:3px;
        text-decoration: none;
        cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
    }
    .girly-pink:hover{
        background-image: linear-gradient(315deg, #ecc0c6 0%, #7ee8fa 0%);
    }
   .blewy-btn{
    background-color: #2a2a72;
    background-image: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%);
    font-family: 'Roboto';
        color:white;
        font-size:13px;
        padding:10px 15px;
        border-radius:3px;
        text-decoration: none;
        cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .blewy-btn:hover{
    background-image: linear-gradient(315deg, #151568 0%, #0064a1 74%);  
   }
   .cocktail-btn{
    background-color: #36096d;
   background-image: linear-gradient(315deg, #36096d 0%, #37d5d6 74%);
   font-family: 'Roboto';
        color:white;
        font-size:13px;
        padding:10px 15px;
        border-radius:3px;
        text-decoration: none;
        cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .cocktail-btn:hover{
    background-image: linear-gradient(315deg, #1e043d 0%, #25aaaa 74%);
   }
   .anonymous-pon{
    background-color: #7f53ac;
    background-image: linear-gradient(315deg, #7f53ac 0%, #1b34a3 74%);
    
    font-family: 'Roboto';
        color:white;
        font-size:13px;
        padding:10px 15px;
        border-radius:3px;
        text-decoration: none;
        cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }.anonymous-pon:hover{
    background-image: linear-gradient(315deg, #7f53ac 0%, #0c2bb6 74%);
    
   }
   .ceaser-btn{
    background-color: #42378f;
    background-image: linear-gradient(315deg, #42378f 0%, #aa0510 74%);
     
    font-family: 'Roboto';
        color:white;
    font-size:13px;
        padding:10px 15px;
        border-radius:3px;
        text-decoration: none;
        cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .ceaser-btn:hover{
    background-image: linear-gradient(315deg, #42378f 0%, #f53844 74%);
   }
   .calm-ash{
    background-color: #537895;
    background-image: linear-gradient(315deg, #537895 0%, #09203f 74%);
    font-family: 'Roboto';
    color:white;
    font-size:13px;
     padding:10px 15px;
     border-radius:3px;
     text-decoration: none;
     cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .calm-ash:hover{
    background-image: linear-gradient(315deg, #688499 0%, #09203f 74%);
   }
   .dark-ash{
    background-color: #485461;
    background-image: linear-gradient(315deg, #485461 0%, #28313b 74%);
    font-family: 'Roboto';
    color:white;
    font-size:13px;
     padding:10px 15px;
     border-radius:3px;
     text-decoration: none;
     cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .dark-ash:hover{
    background-image: linear-gradient(315deg, #63707e 0%, #28313b 74%);
   }

   .v-pinky{
    background-color: #f907fc;
background-image: linear-gradient(315deg, #f907fc 0%, #05d6d9 74%);
font-family: 'Roboto';
    color:white;
    font-size:13px;
     padding:10px 15px;
     border-radius:3px;
     text-decoration: none;
     cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .v-pinky:hover{
background-image: linear-gradient(315deg, #750577 0%, #05d6d9 74%);
   }
   .elvis-blue{
    background-color: #2876f9;
    background-image: linear-gradient(315deg, #2876f9 0%, #6d17cb 74%);
    font-family: 'Roboto';
    color:white;
    font-size:13px;
     padding:10px 15px;
     border-radius:3px;
     text-decoration: none;
     cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .elvis-blue:hover{
    background-image: linear-gradient(315deg, #0d61f1 0%, #6d17cb 74%);
   }

   .unvolved-blue{
    background-color: #29539b;
    background-image: linear-gradient(315deg, #29539b 0%, #1e3b70 74%);
    font-family: 'Roboto';
    color:white;
    font-size:13px;
     padding:10px 15px;
     border-radius:3px;
     text-decoration: none;
     cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .unvolved-blue:hover{
    background-image: linear-gradient(315deg, #072e72 0%, #1e3b70 74%);
   }

   .deep-water{
    background-color: #000000;
    background-image: linear-gradient(147deg, #000000 0%, #04619f 74%);
    font-family: 'Roboto';
    color:white;
    font-size:13px;
     padding:10px 15px;
     border-radius:3px;
     text-decoration: none;
     cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .deep-water:hover{
    background-image: linear-gradient(147deg, #000000 0%, #0477c4 74%);
   }
   .labor-btn{
    background-color: #000000;
background-image: linear-gradient(147deg, #000000 0%, #2c3e50 74%);
font-family: 'Roboto';
    color:white;
    font-size:13px;
     padding:10px 15px;
     border-radius:3px;
     text-decoration: none;
     cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .labor-btn:hover{
    background-image: linear-gradient(147deg, #000000 0%, #0c335a 74%);
   }
   .whale-btn{
    background-color: #130f40;
background-image: linear-gradient(315deg, #130f40 0%, #000000 74%);
font-family: 'Roboto';
    color:white;
    font-size:13px;
     padding:10px 15px;
     border-radius:3px;
     text-decoration: none;
     cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .whale-btn:hover{
    background-image: linear-gradient(315deg, #484666 0%, #000000 74%);
   }
   .vilgreen{
    background-color: #0d0a0b;
background-image: linear-gradient(315deg, #0d0a0b 0%, #009fc2 74%);
font-family: 'Roboto';
    color:white;
    font-size:13px;
     padding:10px 15px;
     border-radius:3px;
     text-decoration: none;
     cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .vilgreen:hover{
    background-image: linear-gradient(315deg, #0d0a0b 0%, #00c6f3 74%);
   }
   .outline-black{
       border:3px solid #3c3c3c;
       font-family: 'Roboto';
    color:#3c3c3c;
    font-size:13px;
     padding:10px 15px;
     border-radius:3px;
     text-decoration: none;
     cursor:pointer;
box-shadow: 0px 1px 1px #ccc;
   }
   .outline-black:hover{
border-color:rgb(182, 182, 182);
background-color:#3c3c3c;
color:white;
   }
   .outline-yellow{
    border:3px solid #FF9800;;
       font-family: 'Roboto';
    color:#3c3c3c;
    font-size:13px;
     padding:10px 15px;
     border-radius:3px;
     text-decoration: none;
     cursor:pointer;
box-shadow: 0px 1px 1px #ccc; 
   }
   .outline-yellow:hover{
border-color:#3c3c3c;
background-color:#FF9800;
color:#3c3c3c;
   }

linear-buttons.html

<div class="container">
    <div class="btn-container"></div><a class="vilgreen">Submit</a></div>
    <div class="btn-container"><a class="whale-btn">Submit</a></div>
    <div class="btn-container"><a class="labor-btn">Submit</a></div>
    <div class="btn-container"><a class="deep-water">Submit</a></div>
    <div class="btn-container"><a class="global-warming-btn">Submit</a></div>
    <div class="btn-container"><a class="violet-stock">Submit</a></div>
    <div class="btn-container"><a class="girly-pink">Submit</a></div>
    <div class="btn-container"><a class="blewy-btn">Submit</a></div>
    <div class="btn-container"><a class="cocktail-btn">Submit</a></div>
    <div class="btn-container"><a class="anonymous-pon">Submit</a></div>
    <div class="btn-container"><a class="ceaser-btn">Submit</a></div>
    <div class="btn-container"><a class="calm-ash">Submit</a></div>
    <div class="btn-container"><a class="dark-ash">Submit</a></div>
    <div class="btn-container"><a class="v-pinky">Submit</a></div>
    <div class="btn-container"><a class="elvis-blue">Submit</a></div>
    <div class="btn-container"><a class="unvolved-blue">Submit</a></div>
    <div class="btn-container"><a class="outline-black">Submit</a></div>
    <div class="btn-container"><a class="outline-yellow">Submit</a></div>
</div>