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
Illustrations
HTML Templates
Icons
Logos
Mockups
UI Templates

Origami Swallow Logo

Free

Download +

Origami Cat Logo

Free

Download +

Origami Seaturtle Logo

Free

Download +

Origami Shark Logo

Free

Download +

- 67%

63 Colorful Weather Icons

63 Colorful Weather Icons

63 Colorful Weather Icons

Add to cart +

Pembroke Welsh Corgi Dog Origami Logo

Free

Download +

Iphone 13 Mockup

Iphone 13 Mockup

Free

Download +

50 Travel Icons

travel-icons-banner-2

50 Travel Icons

Free

Download +

Origami Fox Logo

Free

Download +

Login Page Bootstrap Template 1

Register-page-bootstrap-1

Login Page Bootstrap Template 1

★★★★★

Free

Download +

74 Weather Icons

uifresh-weather-icons-1

74 Weather Icons

Free

Download +

Business Card On Wooden Table Mockup

Business Card On Wooden Table Mockup

Free

Download +

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

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