search call with input+button appearing when filled search field

src/assets/scss/_settings.scss

@@ -108,6 +108,8 @@ $global-button-cursor: auto;
 $global-color-pick-contrast-tolerance: 0;
 $print-transparent-backgrounds: true;
 $print-hrefs: true;
+$global-duration-archive: 0.3s; //duration of css transitions
+$global-bezier-archive: cubic-bezier(0, 0, 0.43, 1.49);
 
 @include add-foundation-colors;
 

src/assets/scss/components/_buttons.scss

@@ -26,7 +26,7 @@ button,.button {
     color: $button-color-alt;
     font-size: $global-font-size*1.3;
     border-color: $button-color-alt;
-    border-radius: 4rem;
+    border-radius: $global-radius-archive*2;
     &:hover{
       color: $anchor-color;
       border-color: $anchor-color;
@@ -34,7 +34,15 @@ button,.button {
   }
 }
 .search {
-  button,.button {
+  .button {
     border-color: $primary-color;
   }
+  button.appear{
+    min-width: unset;
+    background-color: $primary-color;
+    color: $white;
+    border-radius:$global-radius-archive;
+    // padding:0;
+    border: none;
+  }
 }

src/assets/scss/components/_forms.scss

@@ -1,7 +1,16 @@
-.search {
+.search{
   .button{
     border-color: $primary-color;
   }
+  button.appear{
+    display:none;
+  }
+  input:not(:placeholder-shown) {
+    + button {
+      display: block;
+      z-index: 2;
+    }
+  }
   .hollow {
     border-color: $primary-color;
     color: $primary-color;

src/partials/section-hero-omeka.html

@@ -8,9 +8,14 @@
     </section>
   </main>
   <aside>
-    <h2  class="">collections</h2>
-    <nav>
-      <button type="button" class="button hollow">search</button>
-    </nav>
+    <h2>collections</h2>
+
+<!-- https://codepen.io/liamj/pen/vYYLGZj -->
+    <form class="search">
+      <div class="input-group">
+        <input type="text" placeholder="search" class="input-group-field button hollow" />
+        <button class="appear button" type="submit">Go</button>
+      </div>
+    </form>
   </aside>
 </section>