update timetable button

private/js/modules/_reveal.js

@@ -54,6 +54,7 @@ $(function() {
   reveal_element($('.header__logo'));
   reveal_elements($('.timetable__clock__frame'));
   reveal_element($('.timetable__next'));
+  reveal_element($('.timetable__button'));
   reveal_element($('.timetable__start__background'));
 
 });

private/scss/modules/plugins/_form.scss

@@ -153,6 +153,28 @@
   min-width: em(200px);
 }
 
+.button--icon {
+  transform: none;
+  transition: transform 0.4s $easeOutQuart;
+  .button__icon {
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    transform: none !important;
+    width: auto;
+    padding-left: em(15px);
+  }
+  .button__text {
+    vertical-align: top;
+    transform: none !important;
+    padding-left: 0;
+    min-width: auto;
+  }
+  &:hover {
+    transform: scale(1.05);
+  }
+}
+
 .form__field {
   width: 100%;
   display: block;

private/scss/modules/plugins/_timetable.scss

@@ -14,11 +14,11 @@ $timetable_count: 15;
 .timetable__button {
   opacity: 0;
   position: fixed;
-  top: 103px;
+  bottom: 150px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 1000;
-  transition: opacity 0.5s $easeOutQuad;
+  transition: opacity 0.5s $easeOutQuad, transform 0.5s $easeOutQuad;
   #timetable[data-active="0"] & {
     opacity: 1;
   }
@@ -30,6 +30,15 @@ $timetable_count: 15;
     height: 20px;
     margin-left: -20px;
   }
+  &.reveal {
+    transform: translateX(-50%) scale(1.2);
+  }
+  @media screen and (max-width: $huge_breakpoint) {
+    bottom: 130px;
+  }
+  @media screen and (max-width: $large_breakpoint) {
+    bottom: 120px;
+  }
 }
 
 .timetable__clock__frame {

src/project/templates/project/plugins/timetable/timetable.html

@@ -2,8 +2,8 @@
 
 <div id="timetable" data-active="0" data-last="{{ instance.child_plugin_instances|length }}">
     {% if instance.video_vimeo_id and instance.video_cta %}
-        <div class="timetable__button" data-video-vimeo-id="{{ instance.video_vimeo_id }}">
-            <a href="#video" class="button button--white">
+        <div class="timetable__button reveal reveal_animation data_delay_8" data-video-vimeo-id="{{ instance.video_vimeo_id }}">
+            <a href="#video" class="button button--white button--small button--icon">
                 <span class="button__icon">{% include 'project/assets/play.svg' %}</span>
                 <span class="button__text">{{ instance.video_cta }}</span>
             </a>