Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<a class="button" href="#" role="button">
<span>remove</span>
<div class="icon">
<i class="fa fa-remove"></i>
<i class="fa fa-check"></i>
</div>
</a>
removeSuccess = ->
$('.button').removeClass 'success'
$(document).ready ->
$('.button').click ->
$(@).addClass 'success'
setTimeout removeSuccess, 3000
$color: #c0392b;
$color-dark: #a53125;
$speed: "0.25s";
$transition: all #{$speed} cubic-bezier(0.310, -0.105, 0.430, 1.400);
* {
margin: 0;
padding: 0;
box-sizing: inherit;
&:focus {
outline: none;
}
}
html {
box-sizing: border-box;
}
body {
background-color: #ecf0f1;
font-family: 'Open Sans', sans-serif;
}
.button {
display: block;
background-color: $color;
width: 300px;
height: 100px;
line-height: 100px;
margin: auto;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
cursor: pointer;
overflow: hidden;
border-radius: 5px;
box-shadow: 0 0 20px 0 rgba(0,0,0,.3);
transition: $transition;
span,
.icon {
display: block;
height: 100%;
text-align: center;
position: absolute;
top: 0;
}
span {
width: 72%;
font-size: 22px;
text-transform: uppercase;
left: 0;
transition: $transition;
&:after {
content: '';
background-color: $color-dark;
width: 2px;
height: 70%;
position: absolute;
top: 15%;
right: -1px;
}
}
.icon {
width: 28%;
right: 0;
transition: $transition;
.fa {
font-size: 30px;
vertical-align: middle;
transition: $transition, height #{$speed} ease;
}
.fa-remove {
height: 36px;
}
.fa-check {
display: none;
}
}
&.success,
&:hover {
span {
left: -72%;
opacity: 0;
}
.icon {
width: 100%;
.fa {
font-size: 45px;
}
}
}
&.success {
background-color: #27ae60;
.icon {
.fa-remove {
display: none;
}
.fa-check {
display: inline-block;
}
}
}
&:hover {
opacity: .9;
.icon .fa-remove {
height: 46px;
}
}
&:active {
opacity: 1;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment