Permalink
Browse files

Simple footer buttons animation

  • Loading branch information...
1 parent 4974645 commit 6389d267cf70ba97381cf5b0073ac036c70c23b9 @erickreutz erickreutz committed Feb 8, 2014
View
4 source/index.html.erb
@@ -3,7 +3,7 @@
<ul class="sitenav__list">
<li class="sitenav__item">
<a href="/" class="active">
- <img src="/images/logo.svg">
+ <img class="sitenav__logo" src="/images/logo.svg">
</a>
</li>
<li class="sitenav__item">
@@ -12,7 +12,7 @@
</ul>
<ul class="sitenav__altlist">
<li class="sitenav__item">
- <a href="javascript:void(0);">Get in touch</a>
+ <a href="javascript:void(0);" class="sitenav__contact">Get in touch</a>
</li>
</ul>
</nav>
View
4 source/stylesheets/app/components/_sitenav.scss
@@ -54,3 +54,7 @@
}
}
}
+
+.sitenav__logo { margin-bottom: -1px; }
+
+a.sitenav__contact { color: #13c5f1; }
View
24 source/stylesheets/app/components/_slinks.scss
@@ -1,3 +1,17 @@
+@include keyframes(slinks-item-pop) {
+ 0% {
+ @include transform(scale(1));
+ }
+
+ 50% {
+ @include transform(scale(.95));
+ }
+
+ 100% {
+ @include transform(scale(1));
+ }
+}
+
.slinks {
margin: 0;
padding: 0;
@@ -15,7 +29,15 @@
margin-right: 16px;
&:last-child { margin-right: 0; }
- &:active { @include transform(translateY(1px)); }
+
+ .no-touch & {
+ @include transition(all 200ms ease);
+ &:hover { @include transform(translateY(-6px)); }
+ &:active {
+ @include transition(none);
+ @include transform(translateY(-5px));
+ }
+ }
a {
display: block;

0 comments on commit 6389d26

Please sign in to comment.