switch filter button elements to buttons

opentech/apply/funds/templates/funds/base_submissions_table.html

@@ -10,16 +10,16 @@
     {% block table %}
     <div class="wrapper wrapper--table-actions">
         {% if table.data or active_filters %}
-            <div class="button button--filters button--contains-icons js-toggle-filters">Filters</div>
+            <button class="button button--filters button--contains-icons js-toggle-filters">Filters</button>
         {% endif %}
     </div>
 
         {% if table.data or active_filters %}
             <div class="filters">
                 <div class="filters__header">
-                    <div class="js-clear-filters">Clear</div>
+                    <button class="filters__button js-clear-filters">Clear</button>
                     <div>Filter by</div>
-                    <div class="js-close-filters">Close</div>
+                    <button class="filters__button js-close-filters">Close</button>
                 </div>
 
                 <form action="" method="get" class="form form--filters">

opentech/static_src/src/sass/apply/components/_button.scss

@@ -78,6 +78,7 @@
         background: url('./../../images/filters.svg') $color--white no-repeat 93% center;
         border: 1px solid $color--light-mid-grey;
         transition: none;
+        width: 100%;
 
         @include media-query(tablet-landscape) {
             background: none;
@@ -86,6 +87,7 @@
             align-items: center;
             justify-content: flex-start;
             max-width: initial;
+            width: auto;
 
             &::before {
                 content: '';

opentech/static_src/src/sass/apply/components/_filters.scss

@@ -50,4 +50,12 @@
             }
         }
     }
+
+    &__button {
+        appearance: none;
+        -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
+        border: 0;
+        color: $color--primary;
+        background: transparent;
+    }
 }