Skip to content

Instantly share code, notes, and snippets.

@matiassingers
Created November 6, 2013 10:11
Show Gist options
  • Save matiassingers/7333739 to your computer and use it in GitHub Desktop.
Save matiassingers/7333739 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<button class="load-more"></button>
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
@import "compass"
$load-more-height: 40px
$load-more-color: #303030
$load-more-text-color: lighten($load-more-color, 35)
.load-more
display: block
height: $load-more-height
width: 75%
max-width: 280px
padding: 0
margin: 0 auto
background-color: $load-more-color
border: 2px solid lighten($load-more-color, 3)
border-radius: 4px
text-align: center
&:after
display: inline-block
content: 'load more'
text-transform: uppercase
font-weight: bold
font-size: 16px
line-height: $load-more-text-color
background: -webkit-gradient(linear, left top, right top, color-stop(0, $load-more-text-color), color-stop(0.05, white), color-stop(0.40, $load-more-text-color), color-stop(1, $load-more-text-color))
-webkit-background-clip: text
-webkit-text-fill-color: transparent
-webkit-animation: slide-to-unlock 5s linear infinite
&:before
display: inline-block
height: 13px
width: 15px
margin-right: 5px
content: ''
background: url('http://f.cl.ly/items/0Z3d3R333U1P0r070627/arrow-icon.png') no-repeat 50%
background-size: contain
@include keyframes(slide-to-unlock)
from
background-position: -300px 0
to
background-position: 300px 0
.load-more {
display: block;
height: 40px;
width: 75%;
max-width: 280px;
padding: 0;
margin: 0 auto;
background-color: #303030;
border: 2px solid #383838;
border-radius: 4px;
text-align: center;
}
.load-more:after {
display: inline-block;
content: "load more";
text-transform: uppercase;
font-weight: bold;
font-size: 16px;
line-height: #898989;
background: -webkit-gradient(linear, left top, right top, color-stop(0, #898989), color-stop(0.05, white), color-stop(0.4, #898989), color-stop(1, #898989));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: slide-to-unlock 5s linear infinite;
}
.load-more:before {
display: inline-block;
height: 13px;
width: 15px;
margin-right: 5px;
content: "";
background: url("http://f.cl.ly/items/0Z3d3R333U1P0r070627/arrow-icon.png") no-repeat 50%;
background-size: contain;
}
@-moz-keyframes slide-to-unlock {
from {
background-position: -300px 0;
}
to {
background-position: 300px 0;
}
}
@-webkit-keyframes slide-to-unlock {
from {
background-position: -300px 0;
}
to {
background-position: 300px 0;
}
}
@keyframes slide-to-unlock {
from {
background-position: -300px 0;
}
to {
background-position: 300px 0;
}
}
<button class="load-more"></button>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment