Fix alignement and better clarity for 'List all links with those tags' button

Fix CSS class typo and display the link as a button

Fixes #999

3 files changed, 26 insertions, 4 deletions

diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 9065f887..14439402 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -1327,4 +1327,22 @@ form[name="linkform"].page-form {
 
 .markdown *:last-child {
     margin-bottom: 5px !important;
-}
\ No newline at end of file
+}
+
+/**
+ * Pure Button
+ */
+.pure-button-success,
+.pure-button-error,
+.pure-button-warning,
+.pure-button-primary,
+.pure-button-shaarli,
+.pure-button-secondary {
+    color: white !important;
+    border-radius: 4px;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+}
+
+.pure-button-shaarli {
+    background-color: #1B926C;
+}
diff --git a/tpl/default/tag.cloud.html b/tpl/default/tag.cloud.html
index 68335c70..12701465 100644
--- a/tpl/default/tag.cloud.html
+++ b/tpl/default/tag.cloud.html
@@ -14,8 +14,10 @@
     {$countTags=count($tags)}
     <h2 class="window-title">{'Tag cloud'|t} - {$countTags} {'tags'|t}</h2>
     {if="!empty($search_tags)"}
-    <p class="enter">
-      <a href="?searchtags={$search_tags|urlencode}">{'List all links with those tags'|t}</a>
+    <p class="center">
+      <a href="?searchtags={$search_tags|urlencode}" class="pure-button pure-button-shaarli">
+        {'List all links with those tags'|t}
+      </a>
     </p>
     {/if}
 
diff --git a/tpl/default/tag.list.html b/tpl/default/tag.list.html
index a3e741d3..7140c67a 100644
--- a/tpl/default/tag.list.html
+++ b/tpl/default/tag.list.html
@@ -15,7 +15,9 @@
     <h2 class="window-title">{'Tag list'|t} - {$countTags} {'tags'|t}</h2>
     {if="!empty($search_tags)"}
       <p class="center">
-        <a href="?searchtags={$search_tags|urlencode}">{'List all links with those tags'|t}</a>
+        <a href="?searchtags={$search_tags|urlencode}" class="pure-button pure-button-shaarli">
+          {'List all links with those tags'|t}
+        </a>
       </p>
     {/if}