Skip to content

Instantly share code, notes, and snippets.

@msankhala

msankhala/dabblet.css

Created May 22, 2012 03:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save msankhala/2766448 to your computer and use it in GitHub Desktop.
Save msankhala/2766448 to your computer and use it in GitHub Desktop.
Download ZIP
animate gradients
Raw
dabblet.css
/**
* animate gradients
*/
body {
padding-top: 75px;
}
.btn {
margin: 5px;
padding: 13px 35px;
border: solid 2px lightblue;
border-radius: 15px;
display: inline-block;
font-family: Helvetica;
font-size: 20px;
font-weight: 700;
text-decoration: none;
text-shadow: 0 0 10px white;
transition: all 1s cubic-bezier(0, 1.5, 1, -0.5);
}
.v0 {
background: linear-gradient(left, black 50%, darkorchid 51%);
background-size: 2px 70px;
color: greenyellow;
}
.v0:hover {
background-size: 200px 1px;
}
.v1{
background: linear-gradient(-45deg,
black 25%, transparent 26%, transparent 74%, black 75%),
linear-gradient(45deg,
black 25%, transparent 26%, transparent 74%, black 75%);
background-color: deeppink;
background-size: 20px 20px;
background-position: 0 0;
color: white;
}
.v1:hover {
background-size: 4px 2px;
}
.v2 {
background-image: linear-gradient(-45deg,
mediumslateblue 7%,
transparent 10%,
mediumslateblue 90%,
transparent 93%),
linear-gradient(45deg,
mediumslateblue 7%,
transparent 10%,
mediumslateblue 90%,
transparent 93%);
background-size: 3px 2px;
background-position: center;
color: gold;
}
.v2:hover {
background-size: 60px 60px;
}
.v3 {
background-image: linear-gradient(
lightblue 50%, darkslateblue 50%);
background-size: 1px 2px;
color: salmon;
}
.v3:hover {
background-size: 1px 75px;
}
.v4 {
background-image: linear-gradient(45deg,
darkblue 25%, transparent 25%,
transparent 75%, darkblue 75%),
linear-gradient(45deg,
darkblue 25%, transparent 25%,
transparent 75%, darkblue 75%);
background-size: 5px 5px;
background-position: 0 0, 0 0;
color: red;
}
.v4:hover {
background-size: 140px 140px;
background-position: 0 0, 60px 60px;
}
.v5 {
background-image: linear-gradient(-45deg,
transparent 0%,
transparent 7%,
goldenrod 10%,
goldenrod 90%,
transparent 93%,
transparent 100%);
background-size: 15px;
background-position: center;
}
.v5:hover {
background-size: 120px 120px;
background-position: 34px 34px;
}
.v6 {
background: linear-gradient(30deg, transparent 0%, red 45%,
rgba(255,0,0,0.5) 50%,
rgba(255,158,12,0.55) 55%,
rgba(209,255,25,0.6) 60%,
rgba(81,255,38,0.65) 65%,
rgba(91,255,50,0.7) 70%,
rgba(63,255,140,0.75) 75%,
rgba(76,255,255,0.8) 80%,
rgba(89,155,255,0.85) 85%,
rgba(132,102,255,0.9) 90%,
rgba(226,114,255,0.95) 95%,
rgba(249,112,194,1) 100%);
background-size: 360px 120px;
}
.v6:hover {
background-size: 140px 120px;
}
.v7 {
background-image: radial-gradient(center,
cadetblue 35%, transparent 65%);
background-size: 30px 30px;
background-position: 0 50%;
background-repeat: no-repeat;
}
.v7:hover {
background-size: 20px 20px;
background-position: 100% 50%;
}
.v8 {
background-image: radial-gradient(center,
coral 35%, transparent 65%);
background-size: 110px 50px;
background-position: center;
background-repeat: no-repeat;
}
.v8:hover {
background-size: 150px 200px;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<a href="#" class="btn v0">button</a>
<a href="#" class="btn v1">button</a>
<a href="#" class="btn v2">button</a>
<a href="#" class="btn v3">button</a>
<a href="#" class="btn v4">button</a>
<a href="#" class="btn v5">button</a>
<a href="#" class="btn v6">button</a>
<a href="#" class="btn v7">button</a>
<a href="#" class="btn v8">button</a>
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment