1. CSS Button with fontawesome icons

HTML CSS Download Button

demo and code Get Hosting

2. CSS Fizzy Button

CSS Fizzy Button

demo and code Get Hosting

3. Download buttons

Download buttons

demo and code Get Hosting

4. Downloading Animation

Downloading Animation

demo and code Get Hosting

5. Cloud Download Animation

Cloud Download Animation

demo and code Get Hosting

6. Pure css download button

Pure css download button

demo and code Get Hosting

7. Download Upload Button

Download Upload Button

demo and code Get Hosting

8. App download button concept

App download button concept

demo and code Get Hosting

9. Download Button – Design by Kerem Suer

Download Button

demo and code Get Hosting

10.Button with sliding information

Button with sliding information

demo and code Get Hosting

The post 10 HTML CSS Download Buttons appeared first on csshint - A designer hub.

Black & White Button

The post Black & White Button appeared first on csshint - A designer hub.

bootstrap square buttons

RESOURCES

Bootstrap 4 CSS : https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
Bootstrap 4 JS  : https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js
Icons	        : https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css
Jquery          : https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

The post Bootstrap 4 Social Square button appeared first on csshint - A designer hub.

button hover effects bootstrap

RESOURCES

Bootstrap CSS : https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
Bootstrap JS  : https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js
Jquery        : https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

The post Bootstrap 4 Raised buttons with hover effect appeared first on csshint - A designer hub.

Flip Donate Button

HTML

[code language=”html”]

<button class="tip-button">
<span class="tip-button__text">Send me a tip</span>
<div class="coin-wrapper">
<div class="coin">
<div class="coin__middle"></div>
<div class="coin__back"></div>
<div class="coin__front"></div>
</div>
</div>
</button>

[/code]

CSS / SCSS

[code language=”css”]

$coin-size: 3.5rem;
$coin-thickness: $coin-size / 11;

$bg: #f4f7ff;
$bg-button: #031032;
$font-color: #fff;
$c-l: #fcfaf9;
$c-m: #c2cadf;
$c-d: #8590b3;
$c-side: #737c99;
$shine: #e9f4ff;

.tip-button {
background: none;
border: 0;
border-radius: 0.25rem 0.25rem 0 0;
cursor: pointer;
font-family: ‘Quicksand’, sans-serif;
font-size: 0.75rem;
font-weight: 600;
height: 2.6rem;
margin-bottom: -4rem;
outline: 0;
position: relative;
top: 0;
transform-origin: 0% 100%;
transition: transform 50ms ease-in-out;
width: 9.5rem;
-webkit-tap-highlight-color: transparent;
&:active {
transform: rotate(4deg);
}
// Button was clicked
&.clicked {
animation: 150ms ease-in-out 1 shake;
pointer-events: none;
.tip-button__text {
opacity: 0;
transition: opacity 100ms linear 200ms;
}
&::before { // background/bar
height: 0.5rem;
width: 60%;
}
.coin {
transition: margin-bottom 1s linear 200ms;
margin-bottom: 0;
}
}
// Coin almost finished falling
&.shrink-landing {
&::before { // background/bar
transition: width 200ms ease-in;
width: 0;
}
}
// Coin finished falling
&.coin-landed {
&::after { // Thank you message
opacity: 1;
transform: scale(1);
transform-origin: 50% 100%;
}

// Make the little confetti looking dots on this wrapper
.coin-wrapper {
background:
radial-gradient(circle at 35% 97%, rgba($bg-button, 0.4) 0.04rem, transparent 0.04rem),
radial-gradient(circle at 45% 92%, rgba($bg-button, 0.4) 0.04rem, transparent 0.02rem),
radial-gradient(circle at 55% 98%, rgba($bg-button, 0.4) 0.04rem, transparent 0.04rem),
radial-gradient(circle at 65% 96%, rgba($bg-button, 0.4) 0.06rem, transparent 0.06rem);
background-position: center bottom;
background-size: 100%;
bottom: -1rem;
opacity: 0;
transform: scale(2) translateY(-10px);
}
}

&__text {
color: $font-color;
margin-right: 1.8rem;
opacity: 1;
position: relative;
transition: opacity 100ms linear 500ms;
z-index: 3;
}

// Background of button
&::before {
background: $bg-button;
border-radius: 0.25rem;
bottom: 0;
content: ”;
display: block;
height: 100%;
left: 50%;
position: absolute;
transform: translateX(-50%);
transition: height 250ms ease-in-out 400ms, width 250ms ease-in-out 300ms;
width: 100%;
z-index: 2;
}

// Thank you message
&::after {
bottom: -1rem;
color: $bg-button;
content: ‘Thank you!’;
height: 110%;
left: 0;
opacity: 0;
position: absolute;
pointer-events: none;
text-align: center;
transform: scale(0);
transform-origin: 50% 20%;
transition: transform 200ms cubic-bezier(0,0,.35,1.43);
width: 100%;
z-index: 1;
}
}

.coin-wrapper {
background: none;
bottom: 0;
height: 18rem;
left: 0;
opacity: 1;
overflow: hidden;
pointer-events: none;
position: absolute;
transform: none;
transform-origin: 50% 100%;
transition: opacity 200ms linear 100ms, transform 300ms ease-out;
width: 100%;
}

.coin {
–front-y-multiplier: 0;
–back-y-multiplier: 0;
–coin-y-multiplier: 0;
–coin-x-multiplier: 0;
–coin-scale-multiplier: 0;
–coin-rotation-multiplier: 0;
–shine-opacity-multiplier: 0.4;
–shine-bg-multiplier: 50%;
bottom: calc(var(–coin-y-multiplier) * 1rem – #{$coin-size});
height: $coin-size;
margin-bottom: 3.05rem;
position: absolute;
right: calc(var(–coin-x-multiplier) * 34% + 16%);
transform:
translateX(50%)
scale(calc(0.4 + var(–coin-scale-multiplier)))
rotate(calc(var(–coin-rotation-multiplier) * -1deg));
transition: opacity 100ms linear 200ms;
width: $coin-size;
z-index: 3;

&__front,
&__middle,
&__back,
&::before,
&__front::after,
&__back::after {
border-radius: 50%;
box-sizing: border-box;
height: 100%;
left: 0;
position: absolute;
width: 100%;
z-index: 3;
}

// Tails
&__front {
background:
radial-gradient(circle at 50% 50%, transparent 50%, rgba($c-side, 0.4) 54%, $c-m 54%),
linear-gradient(210deg, $c-d 32%, transparent 32%),
linear-gradient(150deg, $c-d 32%, transparent 32%),
linear-gradient(to right, $c-d 22%, transparent 22%, transparent 78%, $c-d 78%),
linear-gradient(to bottom, $c-l 44%, transparent 44%, transparent 65%, $c-l 65%, $c-l 71%, $c-d 71%),
linear-gradient(to right, transparent 28%, $c-l 28%, $c-l 34%, $c-d 34%, $c-d 40%, $c-l 40%, $c-l 47%, $c-d 47%, $c-d 53%, $c-l 53%, $c-l 60%, $c-d 60%, $c-d 66%, $c-l 66%, $c-l 72%, transparent 72%);
background-color: $c-d;
background-size: 100% 100%;
transform: translateY(calc(var(–front-y-multiplier) * #{$coin-thickness} / 2)) scaleY(var(–front-scale-multiplier));

// Shadow on coin face
&::after {
background: rgba(#000, 0.2);
content: ”;
opacity: var(–front-y-multiplier);
}
}

&__middle {
background: $c-side;
transform: translateY(calc(var(–middle-y-multiplier) * #{$coin-thickness} / 2)) scaleY(var(–middle-scale-multiplier));
}

// Heads
&__back {
background:
radial-gradient(circle at 50% 50%, transparent 50%, rgba($c-side, 0.4) 54%, $c-m 54%),
radial-gradient(circle at 50% 40%, $c-l 23%, transparent 23%),
radial-gradient(circle at 50% 100%, $c-l 35%, transparent 35%);
background-color: $c-d;
background-size: 100% 100%;
transform: translateY(calc(var(–back-y-multiplier) * #{$coin-thickness} / 2)) scaleY(var(–back-scale-multiplier));

// Shadow on coin face
&::after {
background: rgba(#000, 0.2);
content: ”;
opacity: var(–back-y-multiplier);
}
}

// Light glare on the coin
&::before {
background:
radial-gradient(circle at 25% 65%, transparent 50%, rgba(white, 0.9) 90%),
linear-gradient(55deg, transparent calc(var(–shine-bg-multiplier) + 0%), $shine calc(var(–shine-bg-multiplier) + 0%), transparent calc(var(–shine-bg-multiplier) + 50%));
content: ”;
opacity: var(–shine-opacity-multiplier);
transform:
translateY(calc(var(–middle-y-multiplier) * #{$coin-thickness} / -2))
scaleY(var(–middle-scale-multiplier))
rotate(calc(var(–coin-rotation-multiplier) * 1deg));
z-index: 10;
}

// Sqaure for the ‘side’ of the coin
&::after {
background: $c-side;
content: ”;
height: $coin-thickness;
left: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
z-index: 2;
}
}

@keyframes shake {
0% { transform: rotate(4deg) }
66% { transform: rotate(-4deg) }
100% { transform: rotate() }
}

/********* BODY STYLES *********/
html,
body {
height: 100%;
}

body {
align-items: center;
background: $bg;
display: flex;
justify-content: center;
-webkit-font-smoothing: antialiased;
}

[/code]

JS

[code language=”js”]

const tipButtons = document.querySelectorAll(‘.tip-button’)

// Loop through all buttons (allows for multiple buttons on page)
tipButtons.forEach((button) => {
let coin = button.querySelector(‘.coin’)

// The larger the number, the slower the animation
coin.maxMoveLoopCount = 90

button.addEventListener(‘click’, () => {
if (button.clicked) return

button.classList.add(‘clicked’)

// Wait to start flipping the coin because of the button tilt animation
setTimeout(() => {
// Randomize the flipping speeds just for fun
coin.sideRotationCount = Math.floor(Math.random() * 5) * 90
coin.maxFlipAngle = (Math.floor(Math.random() * 4) + 3) * Math.PI
button.clicked = true
flipCoin()
}, 50)
})

const flipCoin = () => {
coin.moveLoopCount = 0
flipCoinLoop()
}

const resetCoin = () => {
coin.style.setProperty(‘–coin-x-multiplier’, 0)
coin.style.setProperty(‘–coin-scale-multiplier’, 0)
coin.style.setProperty(‘–coin-rotation-multiplier’, 0)
coin.style.setProperty(‘–shine-opacity-multiplier’, 0.4)
coin.style.setProperty(‘–shine-bg-multiplier’, ‘50%’)
coin.style.setProperty(‘opacity’, 1)
// Delay to give the reset animation some time before you can click again
setTimeout(() => {
button.clicked = false
}, 300)
}

const flipCoinLoop = () => {
coin.moveLoopCount++
let percentageCompleted = coin.moveLoopCount / coin.maxMoveLoopCount
coin.angle = -coin.maxFlipAngle * Math.pow((percentageCompleted – 1), 2) + coin.maxFlipAngle

// Calculate the scale and position of the coin moving through the air
coin.style.setProperty(‘–coin-y-multiplier’, -11 * Math.pow(percentageCompleted * 2 – 1, 4) + 11)
coin.style.setProperty(‘–coin-x-multiplier’, percentageCompleted)
coin.style.setProperty(‘–coin-scale-multiplier’, percentageCompleted * 0.6)
coin.style.setProperty(‘–coin-rotation-multiplier’, percentageCompleted * coin.sideRotationCount)

// Calculate the scale and position values for the different coin faces
// The math uses sin/cos wave functions to similate the circular motion of 3D spin
coin.style.setProperty(‘–front-scale-multiplier’, Math.max(Math.cos(coin.angle), 0))
coin.style.setProperty(‘–front-y-multiplier’, Math.sin(coin.angle))

coin.style.setProperty(‘–middle-scale-multiplier’, Math.abs(Math.cos(coin.angle), 0))
coin.style.setProperty(‘–middle-y-multiplier’, Math.cos((coin.angle + Math.PI / 2) % Math.PI))

coin.style.setProperty(‘–back-scale-multiplier’, Math.max(Math.cos(coin.angle – Math.PI), 0))
coin.style.setProperty(‘–back-y-multiplier’, Math.sin(coin.angle – Math.PI))

coin.style.setProperty(‘–shine-opacity-multiplier’, 4 * Math.sin((coin.angle + Math.PI / 2) % Math.PI) – 3.2)
coin.style.setProperty(‘–shine-bg-multiplier’, -40 * (Math.cos((coin.angle + Math.PI / 2) % Math.PI) – 0.5) + ‘%’)

// Repeat animation loop
if (coin.moveLoopCount < coin.maxMoveLoopCount) {
if (coin.moveLoopCount === coin.maxMoveLoopCount – 6) button.classList.add(‘shrink-landing’)
window.requestAnimationFrame(flipCoinLoop)
} else {
button.classList.add(‘coin-landed’)
coin.style.setProperty(‘opacity’, 0)
setTimeout(() => {
button.classList.remove(‘clicked’, ‘shrink-landing’, ‘coin-landed’)
setTimeout(() => {
resetCoin()
}, 300)
}, 1500)
}
}
})

[/code]

Coin Flip Donate Button

The post Donate Button To Flip Coin Animation appeared first on csshint - A designer hub.

A nice collection of beautiful css3 buttons with animation effects that are created with the help of web designer easy to find more creative ideas on web design buttons. Anything you can think of to do with buttons. Here we introduced some best css3 button hover effects which will make your design beautiful.

1.Button Ripple Effect – VanillaJS

See the Pen Button Ripple Effect – VanillaJS by Tommaso Poletti (@tomma5o) on CodePen.

Demo   download

2.Button Animation with CSS Offset Paths

See the Pen Button Animation with CSS Offset Paths by Nick Salloum (@callmenick) on CodePen.

Demo   download

3.Flipside

See the Pen Flipside by Hakim El Hattab (@hakimel) on CodePen.

Demo   download

4.CSS Fizzy Button

See the Pen CSS Fizzy Button by Jamie Coulter (@jcoulterdesign) on CodePen.

Demo   download

5.3D Download Button w/ Meter Progress

See the Pen 3D Download Button w/ Meter Progress by Terence Devine (@tdevine33) on CodePen.

Demo   download

6.Stripe Button

See the Pen Stripe Button by Felipe Bernardes (@felipebernardes) on CodePen.

Demo   download

7.Button Hover Effects

See the Pen Button Hover Effects by Wisnu ST (@wisnust10) on CodePen.

Demo   download

8.Button Hover Effects

See the Pen Button Hover Effects by Kyle Brumm (@kjbrum) on CodePen.

Demo   download

9.Button Hover Effects

See the Pen Button Hover Effects by Ritchie Jacobs (@ritchiejacobs) on CodePen.

Demo   download

10.Button hover effect

See the Pen Button hover effect by Tim Barden (@timbarden) on CodePen.

Demo   download

11.Gradient Hover Effect

See the Pen Gradient Hover Effect by Chris Colvin (@chrismcolvin) on CodePen.

Demo   download

12.Transitional Buttons

See the Pen Transitional Buttons by Vitaliy (@kavendish) on CodePen.

Demo   download

13.Box/Button Hovers

See the Pen Box/Button Hovers by andrew wierzba (@andrewwierzba) on CodePen.

Demo   download

15.3D btn?!

See the Pen 3D btn?! by Róbert Hegedúš (@IngPirat_etc) on CodePen.

Demo   download

16.General

See the Pen General by Albert Yu (@nightire) on CodePen.

Demo   download

17.3d Button with Pressed State

See the Pen 3d Button with Pressed State by Jesse Couch (@designcouch) on CodePen.

Demo   download

18.Animated Ghost Button

See the Pen Animated Ghost Button by Cameron (@numerical) on CodePen.

Demo   download

19.Contact button

See the Pen Contact button by Alberto Jerez (@ajerez) on CodePen.

Demo   download

20.Button.css: CSS3 Button Animations

See the Pen Button.css: CSS3 Button Animations by Zixuan(Kevin) Fan (@kevinfan23) on CodePen.

Demo   download

21.animation button#3-hover effect

See the Pen animation button#3-hover effect by lichinlin (@lichin-lin) on CodePen.

Demo   download

22.CSS BUTTONS!!

See the Pen CSS BUTTONS!! by Derek Morash (@derekmorash) on CodePen.

Demo   download

23.Animated Rainbow Button

See the Pen Animated Rainbow Button by lemmin (@lemmin) on CodePen.

Demo   download

24.Big Fancy 3D Rotating SVG Button

See the Pen Big Fancy 3D Rotating SVG Button by J Scott Smith (@jscottsmith) on CodePen.

Demo   download

25.Buttons

See the Pen Buttons by Dzen (@dzen) on CodePen.

Demo   download

26.Delete Button (Incl. Confirmation)

See the Pen Delete Button (Incl. Confirmation) by Danny (@edanny) on CodePen.

Demo   download

27.Button Explore

See the Pen Button Explore by Nicolas Lanthemann (@vanderlanth) on CodePen.

Demo   download

28.Button with Hover Effect

See the Pen Button with Hover Effect by Sasha (@sashatran) on CodePen.

Demo   download

29.Gradient Buttons with Background-Color Change (CSS-only)

See the Pen Gradient Buttons with Background-Color Change (CSS-only) by MrPirrera (@pirrera) on CodePen.

Demo   download

30.SVG folding line hover effect

See the Pen SVG folding line hover effect by LukasOe (@lukasoe) on CodePen.

Demo   download

31.Colorful Gradient Buttons

See the Pen Colorful Gradient Buttons by NathanAB (@NathanAB) on CodePen.

Demo   download

I hope these collections of buttons will help to replace your old buttons with these new animated buttons. Thanks and keep visiting

The post Beautiful css3 buttons with hover effects appeared first on csshint - A designer hub.

Here we introduced some best css3 button hover effects which will make your design beautiful.

1Hover.css

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

Demo

2Icon Hover Effects – Simple hover effects for circular icons

The idea is to create a subtle and stylish effect using CSS transitions and animations on the anchors and their pseudo-elements.

Demo

3Squishy Toggle Buttons

A toggle buttons in pure css from Justin Windle a codepen user.

Demo

4Customizable 3D Button using SASS

A simple and minimal design of 3d button with a nice push hover effect designed by Daniel Weidner a codepen user.

Demo

5Creative Button Styles

Modern and subtle styles & effects for buttons (hover and click).

Demo

6Neat hover animations on buttons

A toggle buttons in pure css from Bob Savant a codepen user.

Demo

7Some buttons…

A toggle buttons in pure css from Ottis Kelleghan a codepen user.

Demo

8Button Switches with Checkboxes and CSS3 Fanciness

this is realistic-looking switch buttons using pseudo-elements and checkboxes.

Demo

9Rounded CSS buttons

Rounded CSS buttons from Pali Madra a codepen user.

Demo

10Animated CSS3 buttons

These are some stylish CSS only switch buttons.

Demo

11CSS Animated Buttons With Icons

These are some stylish buttons with simple icon effects.

Demo

12Metal UI Buttons

A nice collection of metal buttons created using CSS3

Demo

12+ Beautiful css3 buttons with hover effects. css hover effects using css. The :hover selector is used to select elements when you mouse over them…

The post 12+ Beautiful css3 buttons with hover effects appeared first on csshint - A designer hub.

Feel free to use these social icons into your projects and create new ones having as starting point this tutorial. Enjoy!

I hope you will enjoy this article. so don’t forget to share your friends.
Thanks

The post 10+ Cool CSS3 Hover Effects Social Icons appeared first on csshint - A designer hub.