Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Google inbox
//Not Required
"QbqMXE", "Toggle Buttons",
"VYRzaV", "Open Close",
"BNYLKJ", "css Spinner"
<script src=""></script>
<script src="//"></script>
@import "compass";
*, *:after, *:before{
@include box-sizing(border-box);
width: 300px;
@include border-radius(15px);
margin: auto;
position: relative;
height: 330px ;
overflow: hidden;
cursor: pointer;
z-index: 200;
@include rotateX(0deg); z-index: 2;
@include transition(all .3s);
opacity: 1;
@include transition(all .3s .2s);
width: 100%;
height: 200px;
background: #3E71DA;
position: absolute;
bottom: 0;
&:after , &:before{
content: '';
position: absolute;
bottom: 0;
border-style: solid;
z-index: 4;
right: 0;
border-color:transparent #96DDFC;
border-width: 200px 285px 0px 0px;
left: 0;
border-color:transparent #36BBF7;
border-width: 200px 0px 0px 285px;
background: #3760C9;
width: 300px;
height: 20px;
z-index: 15;
@include animation(2s open 2 alternate);
@include border-radius(15px 15px 0 0 );
@include transform-origin(50% , 100% );
@include rotateX(180deg);
@include transition(all .3s .2s);
content: '';
position: absolute;
border:147px solid transparent;
border-bottom:110px solid #3760C9 ;
@include border-radius(15px );
bottom: 15px;
left: 3px;
width: 80px;
height: 150px;
border-bottom:30px solid #E5E5E5;
border-right:30px solid #E5E5E5;
@include rotate(45deg);
position: absolute;
left: 135px;
z-index: 3;
opacity: 0;
@include animation(1s move 1s 2 alternate);
@include transition(.3s);
@include keyframes(open){
100%{@include rotateX(0deg); z-index: 2;}
@include keyframes(move){
70% ,100%{top:10px; opacity: 1; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment