UI Fresh | Place For Professional Design Resources!

Place For Professional Design Resources!

Search design resources to energize your creative workflow

Popular
New

Choose category
All categories
HTML Templates
Icons
Logos
Mockups
UI Templates

50 Travel Icons

travel-icons-banner-2

50 Travel Icons

Free

Origami Fox Logo

Free

Login Page Bootstrap Template 1

Register-page-bootstrap-1

Login Page Bootstrap Template 1

★★★★★

Free

74 Weather Icons

uifresh-weather-icons-1

74 Weather Icons

Free

Business Card On Wooden Table Mockup

Business Card On Wooden Table Mockup

Free

UI Fresh Blog

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

Shopping cart