Blog Archive - UI Fresh

Components

21 Free Pattern Gradient Button Effect Styles

21 Free Pattern Gradient Button Effect Styles

Gradient Button Effect Styles

12 Awesome Gradient Button Effect Styles

.container-eg-btn-3 { font-family: sans-serif; color: #fff; 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-3 .button { margin: 20px; padding: 12px 15px; text-align: center; text-transform: uppercase; position: relative; transition: .3s; z-index: 1; background: #3aaeff; cursor: pointer; border-radius: 6px; } .container-eg-btn-3 .button-1:hover { box-shadow: 0 0.6em 0.5em -0.4em #fa4343; transform: translateY(-0.25em); background: #fa4343; } .container-eg-btn-3 .button-2:hover{ background: rgb(255 0 102); box-shadow: rgba(255, 0, 102, 0.4) 4px 4px, rgba(255, 0, 102, 0.3) 8px 8px, rgba(255, 0, 102, 0.2) 12px 12px, rgba(255, 0, 102, 0.1) 16px 16px, rgba(255, 0, 102, 0.05) 20px 20px; } .container-eg-btn-3 .button-3:hover{ background: rgb(129 0 255); box-shadow: rgba(129, 0, 255, 0.4) 0px 4px, rgba(129, 0, 255, 0.3) 0px 8px, rgba(129, 0, 255, 0.2) 0px 12px, rgba(129, 0, 255, 0.1) 0px 16px, rgba(129, 0, 255, 0.05) 0px 20px; } .container-eg-btn-3 .button-4:hover{ background: #0000ff; box-shadow: rgb(255, 255, 255) 6px -6px 0px -3px, rgb(24 200 20) 6px -6px, rgb(255, 255, 255) 12px -12px 0px -3px, rgb(255, 217, 19) 12px -12px, rgb(255, 255, 255) 18px -18px 0px -3px, rgb(255 166 63) 18px -18px, rgb(255, 255, 255) 24px -24px 0px -3px, rgb(255 51 51) 24px -24px; } .container-eg-btn-3 .button-5:hover { box-shadow: rgb(24 200 20) -4px 4px, rgb(255 217 19) -8px 8px, rgb(255 166 63) -12px 12px, rgb(255 51 51) -16px 16px; background: #0000ff; } .container-eg-btn-3 .button-6:hover{ background: #0000ff; box-shadow: #0000ff 0px 0px 0px 3px, rgb(24 200 20) 0px 0px 0px 6px, rgb(255 217 19) 0px 0px 0px 9px, rgb(255 166 63) 0px 0px 0px 12px, rgb(255 51 51) 0px 0px 0px 15px; } .container-eg-btn-3 .button-7:before { pointer-events: none; position: absolute; z-index: -1; content: ""; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center, #000 0%, rgb(99 103 203 / 0%) 80%); transition-duration: 0.3s; transition-property: transform opacity; } .container-eg-btn-3 .button-7:hover{ background: #000; transform: translateY(-5px); } .container-eg-btn-3 .button-7:hover:before{ opacity: 1; transform: translateY(5px); } .container-eg-btn-3 .button-8:before { content: ''; background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); position: absolute; top: -2px; left:-2px; background-size: 400%; z-index: -1; filter: blur(5px); width: calc(100% + 4px); height: calc(100% + 4px); animation: glowing 20s linear infinite; opacity: 0; transition: opacity .3s ease-in-out; border-radius: 6px; } .container-eg-btn-3 .button-8:hover:before, .container-eg-btn-3 .button-8:hover:after { opacity: 1; } .container-eg-btn-3 .button-8:after { z-index: -1; content: ''; position: absolute; width: 100%; height: 100%; background: #111; left: 0; top: 0; border-radius: 6px; opacity: 0; } .container-eg-btn-3 .button-8:active:after { background: transparent; } @keyframes glowing { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } }

8 Beautiful Buttons with Effect Shadow

8 Basic Button Hover Effects with Fill Animation

8 Basic Button Hover Effects with Fill Animation

7 Simple Button Hover States - Line Border Animation

7 Simple Button Hover States – Line Border Animation

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

Company

DMCA.com Protection Status

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

Email: [email protected]

2020 UIFresh.net. All rights reserved.

Shopping cart