1. Button Click Page Animation

Button Click Page Animation

Demo / Code Get Hosting

2. Material UI Stretch Button

Material UI Stretch Button

Demo / Code Get Hosting

3. Ripple Button with Few JavaScript

Ripple Button with JavaScript

Demo / Code Get Hosting

4. Delete Button with Micro-Interactions

Delete Button Click Effects

Demo / Code Get Hosting

5. Bubbly Button with Click Animation

Demo / Code Get Hosting

6. Black Biometirics Login Button

Demo / Code Get Hosting

7. Ripple Effect Animation

Demo / Code Get Hosting

8. Radial Gradient Animation CSS3

Demo / Code Get Hosting

9. CSS Button Click

Demo / Code Get Hosting

10. SCSS Beveled Buttons

Demo / Code Get Hosting

The post 10+ CSS Button Click Effects appeared first on csshint - A designer hub.

next and previous buttons

next and previous buttons in javascript

The post Next and previous buttons appeared first on csshint - A designer hub.

Floating button css

The post Floating button css appeared first on csshint - A designer hub.

1. Arrowed CSS

arrowed css

demo and code Get Hosting

2. Animated 2 states Submit Buttons

Animated submit buttons

demo and code Get Hosting

3. Organic Button

Organic Button

demo and code Get Hosting

4. Button Interaction

Button Interaction

demo and code Get Hosting

5. Button Loading Animation

Button Loading Animation

demo and code Get Hosting

6. Submit Button

Submit Button

demo and code Get Hosting

7. Send button with a transition

Send button with a transition

demo and code Get Hosting

8. Submit with micro-copy status

Submit with micro-copy status

demo and code Get Hosting

9. Submit Loader

Submit Loader

demo and code Get Hosting

10. send button transforms into birds

send button transforms into birds

demo and code Get Hosting

11. Submit button

Submit button css

demo and code Get Hosting

12. Submit Button Concept

html CSS Submit Button

demo and code Get Hosting

The post 12 CSS Submit Buttons appeared first on csshint - A designer hub.

refresh button

The post Bootstrap 4 Login Signup form with refresh button appeared first on csshint - A designer hub.

bootstrap round button

RESOURCES

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

The post Bootstrap 4 round button with hover appeared first on csshint - A designer hub.

Pop Button Click Effect

HTML

[code language=”html”]

<div class="like-container">
<div class="like-cnt unchecked" id="like-cnt">
<i class="like-btn material-icons">thumb_up</i>
</div>
</div>
<div class="gp-footer">
Follow me on :
<a href="facebook.com/gowriprasanthvm" class="soc_icons">facebook</a> /
<a href="https://twitter.com/gowriprasanthvm" class="soc_icons">twitter</a>
</div>

[/code]

CSS

[code language=”css”]

body{background: #333;}
.like-container{filter: url(‘#filter’);}
.like-cnt{
position: absolute;
cursor: pointer;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); background: rgba(255,255,255,0.3); width: 60px;
height: 60px;
border-radius: 50%;
text-align: center;
line-height: 75px;
z-index: 10;
}
.like-btn{
color: #fff;
}

.gp-header{font-family: georgia; font-size: 40px; color: #ddca7e; font-style: italic; text-align: center; margin-top: 31px;}
.gp-footer{position: fixed; color: #fff; bottom: 10px; left: 50%; font-family: georgia; font-style: italic; transform: translateX(-50%);}
.gp-footer .soc_icons{display: inline-block; color: #ddca7e; margin: 0px 0px;}

::-moz-selection { background: transparent;}
::selection {background: transparent;}

[/code]

JS

[code language=”js”]

var check_status = false;
var like_cnt = $("#like-cnt");
var like_parent = $(".like-container");

var burst = new mojs.Burst({
parent: like_parent,
radius: { 20: 60 },
count: 15,
angle:{0:30},
children: {
delay: 250,
duration: 700,
radius:{10: 0},
fill: [ ‘#ddca7e’ ],
easing: mojs.easing.bezier(.08,.69,.39,.97)
}
});

$("#like-cnt").click(function(){
var t1 = new TimelineLite();
var t2 = new TimelineLite();
if(!check_status){
t1.set(like_cnt, {scale:0});
t1.set(‘.like-btn’, {scale: 0});
t1.to(like_cnt, 0.6, {scale:1, background: ‘#ddca7e’,ease: Expo.easeOut});
t2.to(‘.like-btn’, 0.65, {scale: 1, ease: Elastic.easeOut.config(1, 0.3)}, ‘+=0.2’);
// t1.timeScale(5);
check_status=true;
//circleShape.replay();
burst.replay();
}
else{
t1.to(like_cnt, 1, {scale:1})
.to(like_cnt, 1, {scale:1, background: ‘rgba(255,255,255,0.3)’, ease: Power4.easeOut});
t1.timeScale(7);
check_status=false;
}

})
[/code]

Interactive splat like button Snippet

The post Pop Button Click Effect appeared first on csshint - A designer hub.

Html Button Tooltip

HTML / PUG

[code language=”html”]

a.Button(href="#0", data-tooltip="File size: 50MB")
span.Button__textWrapper
span.Button__text Download
span.Button__icon(aria-hidden="true")

[/code]

CSS / SCSS

[code language=”css”]

//- BASE

*,
*:after,
*:before { box-sizing: border-box; }

html { font-size: 16px; }

body {
display: flex;
justify-content: center;
align-items: center;
font-size: 100%;
font-family: ‘PT Sans’, sans-serif;
background-color: #150811;
height: 100vh;
}

a { text-decoration: none; }

//- COMPONENT
$duration: 500ms;
$button-height: 60px;
$button-width: 200px;
$tooltip-height: 60px;
$tooltip-width: 140px;

%Button__element {
position: absolute;
width: 100%;
height: 100%;
left: 0;
}

%Button__transitionable {
transition: top $duration;
}

.Button {
display: inline-block;
position: relative;
background-color: #0CBABA;
color: #fff;
font-size: 1.2rem;
border-radius: 1000px;
width: $button-width;
height: $button-height;
box-shadow: 0 2px 20px rgba(#000, 0.7), inset 0 1px rgba(#fff, 0.3);
text-align: center;
transition: background-color $duration, transform 100ms;

&__textWrapper {
@extend %Button__element;
overflow: hidden;
}

&__text {
@extend %Button__element;
@extend %Button__transitionable;
line-height: $button-height;
top: 0;
}

&__icon {
@extend %Button__element;
@extend %Button__transitionable;
top: 100%;
background: url(‘https://cl.ly/0X3o100h2H0g/icon-download.svg’) no-repeat center center;
}

// Tooltip
&::before {
content: attr(data-tooltip);
width: $tooltip-width;
height: $tooltip-height;
background-color: #EEB868;
font-size: 1rem;
border-radius: .25em;
line-height: $tooltip-height;
bottom: 90px;
left: calc(50% – 70px);
}

&::after {
content: ”;
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: #EEB868;
left: calc(50% – 10px);
bottom: 70px;
}

&::before,
&::after {
position: absolute;
opacity: 0;
transition: all $duration;
visibility: hidden;
}

//- button hover
&:hover {
background-color: #01BAEF;

.Button__text { top: -100%; }

.Button__icon { top: 0; }

&::before,
&::after {
opacity: 1;
visibility: visible;
}

&::after { bottom: 60px; }

&::before { bottom: 80px; }
}

&:active { transform: translate(2px, 2px); }
}

[/code]

Button with Tooltip Snippet

The post Button Tooltip On Hover appeared first on csshint - A designer hub.

Rotating Icon Button

HTML

[code language=”html”]

<h1>Rotating Icon Buttons</h1>
<div class="main-wrapper">
<i class="material-icons">attach_file</i>
<i class="material-icons">settings</i>
<i class="material-icons">refresh</i>
<i class="material-icons">search</i>
<i class="material-icons">explore</i>
<i class="material-icons">public</i>
<i class="material-icons">autorenew</i>
<i class="material-icons">add</i>
</div>
<p>CodePen by Cole Waldrip</p>

[/code]

CSS

[code language=”css”]

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);
* {
font-family: "Roboto", Arial, sans-serif;
}

body {
font-size: 1rem;
background-color: #ebebeb;
padding: 20px;
text-align: center;
}

h1 {
font-weight: 100;
color: #777;
}

.main-wrapper {
border-radius: 4px;
background-color: white;
padding: 20px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
position: relative;
}

i.material-icons {
font-size: 1.5rem;
color: white;
position: relative;
border-radius: 50%;
padding: 5px;
margin: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: color 0.2s ease, background-color 0.2s ease, transform 0.3s ease;
}

i.material-icons:after {
content: "";
width: 100%;
height: 100%;
border: solid 2px;
transform: scale(0.8);
position: absolute;
top: -2px;
left: -2px;
border-radius: 50%;
transition: all 0.3s ease;
}

i.material-icons:hover:after {
transform: scale(1);
box-shadow: 10px 0 20px rgba(0, 0, 0, 0.19), 6px 0 6px rgba(0, 0, 0, 0.23);
}

i.material-icons:nth-of-type(4) {
background-color: #88b999;
}

i.material-icons:nth-of-type(4):hover {
color: #88b999;
}

i.material-icons:nth-of-type(4):after {
border-color: #88b999;
}

i.material-icons:nth-of-type(5) {
background-color: #88b2b9;
}

i.material-icons:nth-of-type(5):hover {
color: #88b2b9;
}

i.material-icons:nth-of-type(5):after {
border-color: #88b2b9;
}

i.material-icons:nth-of-type(6) {
background-color: #8897b9;
}

i.material-icons:nth-of-type(6):hover {
color: #8897b9;
}

i.material-icons:nth-of-type(6):after {
border-color: #8897b9;
}

i.material-icons:nth-of-type(7) {
background-color: #af88b9;
}

i.material-icons:nth-of-type(7):hover {
color: #af88b9;
}

i.material-icons:nth-of-type(7):after {
border-color: #af88b9;
}

i.material-icons:nth-of-type(8) {
background-color: #d59acb;
}

i.material-icons:nth-of-type(8):hover {
color: #d59acb;
}

i.material-icons:nth-of-type(8):after {
border-color: #d59acb;
}

i.material-icons:nth-of-type(1) {
background-color: #cd8484;
}

i.material-icons:nth-of-type(1):hover {
color: #cd8484;
}

i.material-icons:nth-of-type(1):after {
border-color: #cd8484;
}

i.material-icons:nth-of-type(2) {
background-color: #ec9f83;
}

i.material-icons:nth-of-type(2):hover {
color: #ec9f83;
}

i.material-icons:nth-of-type(2):after {
border-color: #ec9f83;
}

i.material-icons:nth-of-type(3) {
background-color: #cdb274;
}

i.material-icons:nth-of-type(3):hover {
color: #cdb274;
}

i.material-icons:nth-of-type(3):after {
border-color: #cdb274;
}

i.material-icons:hover {
background-color: transparent;
transform: rotate(90deg);
cursor: pointer;
box-shadow: none;
}

p {
color: #999;
font-weight: 300;
margin-top: 20px;
}

@media (min-width:601px) {
i.material-icons {
padding:10px;
margin:5px;
font-size:2rem;
}
}

@media (min-width:993px) {
i.material-icons {
padding:20px;
margin:10px;
font-size:4rem;
}
i.material-icons:after {
border-width:3px;
top:-3px;
left:-3px;
}
}
[/code]

Icons With Rotating Button Effect

The post Rotating Icon Button Effect appeared first on csshint - A designer hub.

The post 10 best Examples Of Call-To-Action Buttons using css & js appeared first on csshint - A designer hub.