Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Delete Button (Incl. Confirmation)
%button.centerMe
.icon
%i.fa.fa-trash-o
%i.fa.fa-question
%i.fa.fa-check
.text
%span Delete
// Design / Dribbble by:
// Adam Whitcroft
// URL: https://dribbble.com/shots/969445-The-Double-Delete
$("button").click(function(){
if($(this).hasClass("confirm")){
$(this).addClass("done");
$("span").text("Deleted");
} else {
$(this).addClass("confirm");
$("span").text("Are you sure?");
}
});
// Reset
$("button").on('mouseout', function(){
if($(this).hasClass("confirm") || $(this).hasClass("done")){
setTimeout(function(){
$("button").removeClass("confirm").removeClass("done");
$("span").text("Delete");
}, 3000);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
// Setting up
$bg: #313841; $red: #F34541; $black: #1D242B; $green: #38B87C; $blue: #2492FF; body { background: $bg; color: #fff; font-family: "Roboto", sans-serif; font-size: 13px; } .centerMe { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
// Dribbble
button {
display: flex;
cursor: pointer;
border: 0;
background: transparent;
outline: 0;
overflow: hidden;
.icon {
position: relative;
background: $black;
line-height: 30px;
width: 30px;
height: 30px;
text-align: center;
color: #fff;
font-size: 18px;
transition: .2s color;
border-radius: 2px;
.fa {
width: 30px;
transition: .2s all;
}
.fa-check { color: $green; }
.fa-question { color: $blue; }
&:after {
content: ' ';
display: block;
position: absolute;
width: 5px;
height: 5px;
transform: rotate(45deg);
background: $black;
top: 12.5px;
right: 1px;
transition: .2s right;
z-index: 1;
}
}
.text {
position: relative;
width: 0;
height: 30px;
overflow: hidden;
font-family: "Roboto", sans-serif;
background: $red;
text-align: center;
line-height: 30px;
color: #fff;
font-weight: 300;
transition: .2s all;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
span {
width: 100%;
opacity: 0;
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
transition: .3s all;
}
}
&:hover {
.icon {
color: $red;
border-radius: 0;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
&:after { right: -2px; }
}
.text {
width: 120px;
span { opacity: 1; top: 0; }
}
}
&.confirm {
.icon {
border-radius: 0;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
.fa { transform: translateY(-30px); }
&:after { right: -2px }
}
.text {
background: $blue;
width: 120px;
span { opacity: 1; top: 0; }
}
}
&.done {
.icon {
border-radius: 0;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
.fa { transform: translateY(-60px); }
&:after { right: -2px }
}
.text {
background: $green;
width: 120px;
span { opacity: 1; top: 0; }
}
}
}
@keyframes fadeInZoom {
0% { opacity: 0; transform: scale(.7); }
100% { opacity: 1; transform: scale(1); }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment