Home » Components » 21 Free Pattern Gradient Button Effect Styles
21 Free Pattern Gradient Button Effect Styles

21 Free Pattern Gradient Button Effect Styles

29/08/2024 226 0

21 Free Pattern Gradient Button Effect Styles – Spice up your web design with these unique and visually appealing gradient button effects featuring stunning patterns. Download these free CSS styles and easily implement them into your projects. Add a touch of creativity and personality to your user interface.

Demo 21 Pattern Gradient Button Styles

(Hover these below buttons to view effects)

Skew Gradient 01 Pattern Gradient 01 Pattern Gradient 02 Pattern Border 01 Pattern Gradient 03 Skew Gradient 02 Pattern Gradient 04 Pattern Text 01 Pattern Text 02 Pattern Radial 01 Pattern Radial 02 Pattern Radial 03 Pattern Radial 04 Pattern Radial 05 Pattern Radial 06 Pattern Radial 07 Pattern Radial 08 Pattern Radial 09 Pattern Radial 10 Pattern Radial 11 Pattern Radial 12

Download the full code here

Source code 21 Pattern Gradient Button Styles (HTML&CSS)

HTML
<div class="container-eg-btn-5">
    <a class="button button-1">Skew Gradient 01</a>
    <a class="button button-2">Pattern Gradient 01</a>
    <a class="button button-3">Pattern Gradient 02</a>
    <a class="button button-4">Pattern Border 01</a>
    <a class="button button-5">Pattern Gradient 03</a>
    <a class="button button-6">Skew Gradient 02</a>
    <a class="button button-7">Pattern Gradient 04</a>
    <a class="button button-8">Pattern Text 01</a>
    <a class="button button-9">Pattern Text 02</a>
    <a class="button button-10">Pattern Radial 01</a>
    <a class="button button-11">Pattern Radial 02</a>
    <a class="button button-12">Pattern Radial 03</a>
    <a class="button button-13 animation-hv">Pattern Radial 04</a>
    <a class="button button-14 animation-hv">Pattern Radial 05</a>
    <a class="button button-15 animation-hv">Pattern Radial 06</a>
    <a class="button button-16 animation-hv">Pattern Radial 07</a>
    <a class="button button-17 animation-hv">Pattern Radial 08</a>
    <a class="button button-18 animation-hv">Pattern Radial 09</a>
    <a class="button button-19">Pattern Radial 10</a>
    <a class="button button-20 animation-hv">Pattern Radial 11</a>
    <a class="button button-21 animation-hv">Pattern Radial 12</a>
</div>
CSS
.container-eg-btn-5 {
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    margin: 0 auto 10px;
    padding: .5em;
    line-height: normal;
}

.container-eg-btn-5 .button {
    background: #af40ff;
    margin: 20px;
    padding: 18px 22px;
    text-align: center;
    text-transform: uppercase;
    position: relative;
    transition: .3s;
    z-index: 1;
    color: #fff;
    cursor: pointer;
    border-radius: 12px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 700;
}

.container-eg-btn-5 .button-1 {
    background-color: #7a00ff33;
}

.container-eg-btn-5 .button-1:after {
    background-color: initial;
    background-image: linear-gradient(45deg, #ff6209 0 50%, #6905d5 50% 100%);
    content: "";
    display: block;
    overflow: hidden;
    position: absolute;
    left: 4px;
    right: 4px;
    top: 4px;
    bottom: 4px;
    transition: all 0.1s ease-out;
    z-index: -1;
    border-radius: 10px;
}

.container-eg-btn-5 .button-1:hover:after {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    transition-timing-function: ease-in;
}

.container-eg-btn-5 .button-1:active:after {
    bottom: 4px;
    left: 4px;
    right: 4px;
    top: 4px;
}

.container-eg-btn-5 .button-2 {
    background-image: repeating-linear-gradient(-45deg, #b3b2ff 12px 36px, #c08aff 36px 60px, #ffd6fa 60px 84px, #ff97c5 84px 108px, #ffecec 108px 132px);
    color: #010138;
    background-size: 300% 150%;
}

.container-eg-btn-5 .button-2:hover {
    background-position: 20% center;
}

.container-eg-btn-5 .button-2:active {
    background-position: 0% center;
}

.container-eg-btn-5 .button-3 {
    background-image: repeating-linear-gradient(135deg, #b3b2ff 12px 36px, #c08aff 36px 60px, #ffd6fa 60px 84px, #ff97c5 84px 108px, #ffecec 108px 132px);
    color: #010138;
    background-size: 300% 150%;
    overflow: hidden;
    background-position: left center;
    text-shadow: 1px 1px white;
}

.container-eg-btn-5 .button-3:hover {
    background-position: 20% center;
}
.container-eg-btn-5 .button-3:hover:after {
    background-position: 80% center;
}
.container-eg-btn-5 .button-3:after {
    content: '';
    background-image: repeating-linear-gradient(45deg, #b3b2ff 12px 36px, #c08aff 36px 60px, #ffd6fa 60px 84px, #ff97c5 84px 108px, #ffecec 108px 132px);
    position: absolute;
    bottom: 0;
    left: 0;
    background-size: 300% 150%;
    background-position: right center;
    z-index: -1;
    width: 100%;
    height: 50%;
    transition: .3s;
}

.container-eg-btn-5 .button-4 {
    background-image: repeating-linear-gradient(45deg, #b3b2ff 12px 36px, #c08aff 36px 60px, #ffd6fa 60px 84px, #ff97c5 84px 108px, #ffecec 108px 132px);
    color: #010138;
    background-size: 300% 150%;
}

.container-eg-btn-5 .button-4:hover {
    background-position: 20% center;
}

.container-eg-btn-5 .button-4:active:after {
    width: 0;
}
.container-eg-btn-5 .button-4:after {
    content: "";
    position: absolute;
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    transform-origin: center;
    background: #fffef7;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    z-index: -1;
    border-radius: 7px;
}

.container-eg-btn-5 .button-5 {
    background-image: repeating-linear-gradient(45deg, #ffbe5e 12px 36px, #FFEB3B 36px 60px, #CDDC39 60px 84px, #5cccff 84px 108px, #92f3ff 108px 132px);
    color: #010138;
    background-size: 300% 25%;
    background-position: 0 center;
    text-shadow: 1px 1px white;    
}

.container-eg-btn-5 .button-5:hover {
    background-position: 20% center;
}

.container-eg-btn-5 .button-5:active {
    background-position: 0% center;
}

.container-eg-btn-5 .button-6 {
    background-image: linear-gradient(-45deg, #f20ad6 0% 28%, #00BCD4 28% 72%, #f20ad6 72% 100%);
    background-size: 200% 34%;
}

.container-eg-btn-5 .button-6:hover {
    background-position: right top;
}

.container-eg-btn-5 .button-6:active {
    background-position: left top;
}

.container-eg-btn-5 .button-7 {
    background-image: repeating-linear-gradient(32deg, #E91E63 0 17px, #ff71a4 18px 36px);
    background-size: 200% 36%;
    box-shadow: 0px 6px 16px 0px #8d7bb187;
    background-position: center;
    /* color: #000138; */
    text-shadow: 1px 1px 0px #E91E63;
}
.container-eg-btn-5 .button-7:hover{
    background-position: 80% top;
}

@keyframes glowing {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}

.container-eg-btn-5 .button-8:hover {
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: unset;
    text-shadow: 1px 1px #8BC34A;
}
.container-eg-btn-5 .button-8 {
    background-image: repeating-linear-gradient(to right, #8BC34A 0 20px, #CDDC39 20px 40px);
    background-size: 400%; 
    box-shadow: 0px 6px 16px 0px #8d7bb187;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
     text-shadow: unset; 
     animation: glowing 50s linear infinite; 
}
.container-eg-btn-5 .button-8:active{
    box-shadow: 0px 4px 8px 0px #8d7bb187;
}

.container-eg-btn-5 .button-9:hover {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: unset; 
    animation: glowing 50s linear infinite;  
}
.container-eg-btn-5 .button-9 {
    background-image: repeating-linear-gradient(to right, #8BC34A 0 20px, #CDDC39 20px 40px);
    background-size: 400%; 
    box-shadow: 0px 6px 16px 0px #8d7bb187;
     text-shadow: 1px 1px #8BC34A;       
}
.container-eg-btn-5 .button-9:active{
    box-shadow: 0px 4px 8px 0px #8d7bb187;
}

.container-eg-btn-5 .button-10{
    overflow: hidden;
}
.container-eg-btn-5 .button-10:after {
    background-color: initial;
    background-image: repeating-radial-gradient(#ff6209 0 20px, #6905d5 20px 40px);
    content: "";
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    transition: all 0.3s ease-out;
    z-index: -1;
    width: 100%;
    padding-top: 100%;
    border-radius: 12px;
    transform: translate(-50%, -50%);
    background-size: 100% 100%;
    background-position: center center;
}
.container-eg-btn-5 .button-10:hover:after {
    background-size: 10% 100%;
}
.container-eg-btn-5 .button-10:active:after {
    background-size: 100% 100%;
}

.container-eg-btn-5 .button-11{
    overflow: hidden;
    color: #000138;
}
.container-eg-btn-5 .button-11:hover:after {
    transform: translate(-50%, -50%) scale(1);
}

.container-eg-btn-5 .button-11:active:after {
    transform: translate(-50%, -50%) scale(2);
}

.container-eg-btn-5 .button-11:after {
    background-color: initial;
    background-image: repeating-radial-gradient(#b3b2ff 0 10px, #ffd6fa 10px 20px);
    content: "";
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    transition: all 0.3s ease-out;
    z-index: -1;
    width: 100%;
    padding-top: 100%;
    border-radius: 12px;
    transform: translate(-50%, -50%) scale(2);
}

.container-eg-btn-5 .button-12{
    overflow: hidden;
    color: #000138;
    border: 2px solid #000138;
}
.container-eg-btn-5 .button-12:hover:after {
    transform: translate(-50%, -65%) scale(1);
}

.container-eg-btn-5 .button-12:active:after {
    transform: translate(-50%, -65%) scale(2);
}

.container-eg-btn-5 .button-12:after {
    background-color: initial;
    background-image: repeating-radial-gradient(#ffc178 0 15px, #ff9999 15px 30px);
    content: "";
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    transition: all 0.3s ease-out;
    z-index: -1;
    width: 100%;
    padding-top: 100%;
    border-radius: 12px;
    transform: translate(-50%, -65%) scale(2);
}

.animation-hv:hover:after{
    animation: glowing 20s linear infinite;
}

.container-eg-btn-5 .button-13{
    overflow: hidden;
    color: #000138;
    text-shadow: 1px 1px #b3b2ff;
}

.container-eg-btn-5 .button-13:active:after {
    background-image: unset;    
}
.container-eg-btn-5 .button-13:after {
    background-color: #b3b2ff;
    background-image: repeating-radial-gradient(#b3b2ff 0 10px, #ffd6fa 10px 20px);
    content: "";
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    z-index: -1;
    width: 100%;
    padding-top: 100%;
    border-radius: 12px;
    transform: translate(-50%, -50%) rotate(113deg) scale(1.5);
    background-size: 9% 9%;
}

.container-eg-btn-5 .button-14{
    overflow: hidden;
    color: #000138;
    text-shadow: 1px 1px #FFEB3B;
}
.container-eg-btn-5 .button-14:active:after {
    background-image: unset;    
}
.container-eg-btn-5 .button-14:after {
    background-color: #FFEB3B;
    background-image: repeating-radial-gradient(#FF9800 0 10px, #FFEB3B 10px 20px, #8BC34A 20px 30px);
    content: "";
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    z-index: -1;
    width: 100%;
    padding-top: 100%;
    border-radius: 12px;
    transform: translate(-50%, -50%) rotate(68deg) scale(1.2);
    background-size: 18% 18%;
}

.container-eg-btn-5 .button-15{
    overflow: hidden;
    color: #000138;
    text-shadow: 1px 1px #6fffdf;
}
.container-eg-btn-5 .button-15:active:after {
    background-image: unset;    
}
.container-eg-btn-5 .button-15:after {
    background-color: #30E8BF;
    background-image: repeating-radial-gradient(#6effdf 0 10px, #ffa973 10px 20px);
    content: "";
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    z-index: -1;
    width: 100%;
    padding-top: 100%;
    border-radius: 12px;
    transform: translate(-50%, -50%) rotate(45deg);
    background-size: 20% 20%;
}

.container-eg-btn-5 .button-16{
    overflow: hidden;
    text-shadow: 1px 1px #ff89b1;
}
.container-eg-btn-5 .button-16:active:after {
    background-image: unset;    
}
.container-eg-btn-5 .button-16:after {
    background-color: #ff89b1;
    background-image: repeating-radial-gradient(#ff89b1 0 10px, #479cc2 10px 20px);
    content: "";
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    z-index: -1;
    width: 100%;
    padding-top: 100%;
    border-radius: 12px;
    transform: translate(-50%, -50%);
    background-size: 50% 50%;
}

.container-eg-btn-5 .button-17{
    overflow: hidden;
    color: #000138;
    text-shadow: 1px 1px #b795f5;
}
.container-eg-btn-5 .button-17:active:after {
    background-image: unset;    
}
.container-eg-btn-5 .button-17:after {
    background-color: #b795f5;
    background-image: repeating-radial-gradient(#FF9800 0 10px, #ffc9a7 10px 20px, #b795f5 20px 30px, #87caff 30px 40px);
    content: "";
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    z-index: -1;
    width: 100%;
    padding-top: 100%;
    border-radius: 12px;
    transform: translate(-50%, -50%) rotate(336deg);
    background-size: 26% 26%;
}

.container-eg-btn-5 .button-18{
    overflow: hidden;
    text-shadow: 1px 1px #9d28b0;
}
.container-eg-btn-5 .button-18:active:after {
    background-image: unset;    
}
.container-eg-btn-5 .button-18:after {
    background-color: #9C27B0;
    background-image: repeating-radial-gradient(#FF9800 0 10px, #03A9F4 10px 20px, #9C27B0 20px 30px);
    content: "";
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    z-index: -1;
    width: 100%;
    padding-top: 100%;
    border-radius: 12px;
    transform: translate(-53%, -53%) rotate(155deg);
    background-size: 50% 50%;
}

.container-eg-btn-5 .button-19{
    overflow: hidden;
    color: #FF9800;
}
.container-eg-btn-5 .button-19:hover:before {
    animation: glowing 20s linear infinite;
}
.container-eg-btn-5 .button-19:active:before {
    background-image: unset;    
}
.container-eg-btn-5 .button-19:before {
    background-color: #9C27B0;
    background-image: repeating-radial-gradient(#FF9800 0 10px, #03A9F4 10px 20px, #9C27B0 20px 30px);
    content: "";
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    z-index: -1;
    width: 100%;
    padding-top: 100%;
    border-radius: 12px;
    transform: translate(-53%, -53%) rotate(155deg);
    background-size: 50% 50%;
}

.container-eg-btn-5 .button-19:after {
    content: "";
    position: absolute;
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    transform-origin: center;
    background: #fff4d1;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    z-index: -1;
    border-radius: 7px;
}

.container-eg-btn-5 .button-20{
    overflow: hidden;
    color: #000138;
}
.container-eg-btn-5 .button-20:hover:after {
    animation: glowing 20s linear infinite;
}
.container-eg-btn-5 .button-20:after {
    background-color: #ffb2b7;
    background-image: repeating-radial-gradient(#ffb2b7 0 10px, #fffafe 10px 20px);
    content: "";
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    z-index: -1;
    width: 100%;
    padding-top: 100%;
    border-radius: 12px;
    transform: translate(-52%, -48%) rotate(67deg) scale(1.5);
    background-size: 8% 8%;
}

.container-eg-btn-5 .button-21{
    overflow: hidden;
    color: #000138;
}
.container-eg-btn-5 .button-21:active:after {
    background-image: unset;    
}
.container-eg-btn-5 .button-21:after {
    background-color: #FFC107;
    background-image: repeating-radial-gradient(#fff8ef 0 3px, #FFC107 5px 15px, #fff06a 17px 20px);
    content: "";
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    z-index: -1;
    width: 100%;
    padding-top: 100%;
    border-radius: 12px;
    transform: translate(-50%, -50%) rotate(67deg) scale(1.5);
    background-size: 12% 12%;
}

Related Articles
We will be happy to hear your thoughts

Leave a reply

UIFresh Logo

Free & Premium Professional Templates, Icons, UI Kits, Graphic, Illustrations, Mockups… easy to use for Designers, Developers, Startups and Agencies.

Facebook Twitter Behance Dribbble Instagram Pinterest Deviantart Github

Company

DMCA.com Protection Status

If you have any questions, let’s contact us. Thanks!

 

2020 UIFresh.net. All rights reserved.

UI Fresh
Logo
Shopping cart