Skip to content

Instantly share code, notes, and snippets.

@yamitake
Created September 27, 2012 05:55
Show Gist options
  • Select an option

  • Save yamitake/3792429 to your computer and use it in GitHub Desktop.

Select an option

Save yamitake/3792429 to your computer and use it in GitHub Desktop.
ほわほわするスタイルシート
/* Download button */
@-webkit-keyframes downloadButton {
0% { box-shadow: inset 0 1px 0 rgba(120,120,255,.1), 0 1px 5px rgba(100,100,50,.25), 0 2px 10px rgba(200,200,255,.5); }
50% { box-shadow: inset 0 1px 0 rgba(120,120,255,.1), 0 1px 5px rgba(100,100,50,.25), 0 2px 25px rgba(200,200,255,.9); }
100% { box-shadow: inset 0 1px 0 rgba(120,120,255,.1), 0 1px 5px rgba(100,100,50,.25), 0 2px 10px rgba(200,200,255,.5); }
}
@-moz-keyframes downloadButton {
0% { box-shadow: inset 0 1px 0 rgba(120,120,255,.1), 0 1px 5px rgba(100,100,50,.25), 0 2px 10px rgba(200,200,255,.5); }
50% { box-shadow: inset 0 1px 0 rgba(120,120,255,.1), 0 1px 5px rgba(100,100,50,.25), 0 2px 25px rgba(200,200,255,.9); }
100% { box-shadow: inset 0 1px 0 rgba(120,120,255,.1), 0 1px 5px rgba(100,100,50,.25), 0 2px 10px rgba(200,200,255,.5); }
}
.btn-blink,.done{
font-size: 24px;
font-weight: 200;
//color: #fff; /* redeclare to override the `.jumbotron a` */
border: 0;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: inset 0 1px 0 rgba(120,120,255,.1), 0 1px 5px rgba(100,100,50,.25), 0 2px 10px rgba(200,200,255,.01);
-moz-box-shadow: inset 0 1px 0 rgba(120,120,255,.1), 0 1px 5px rgba(100,100,50,.25), 0 2px 10px rgba(200,200,255,.01);
box-shadow: inset 0 1px 0 rgba(120,120,255,.1), 0 1px 5px rgba(100,100,50,.25), 0 2px 10px rgba(200,200,255,.01);
-webkit-animation-name: downloadButton;
-moz-animation-name: downloadButton;
-webkit-animation-duration: 1.5s;
-moz-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-transition: none;
-moz-transition: none;
transition: none;
&:active {
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);
box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);
}
}
.btn-blink:active {
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);
box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);
}
@yamitake
Copy link
Copy Markdown
Author

本当はlessなのだった。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment