buttons: add

demo.html

@@ -240,6 +240,28 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </div>
             </div>
 
+            <div class="page">
+                <div class="row">
+                    <div class="col">
+                        <h1>Bottoni</h1>
+                        <p>
+                            Per utilizzare i bottoni basta applicare la classe
+                            <code>.btn</code>, e <code>.btn-inverse</code> per
+                            i bottoni inversi.
+                        </p>
+
+                        <div>
+                            <a href="#" class="btn">Test button</a>
+                            <a href="#" class="btn btn-inverse">Test button</a>
+                        </div>
+                        <div>
+                            <button class="btn">Test button</button>
+                            <button class="btn btn-inverse">Test button</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <footer>
                 <p>
                     Ubuntu e Canonical sono marchi registrati da Canonical

scss/_buttons.scss

+/* Copyright (C) 2018 Pietro Albini <pietroalbini@ubuntu.com>
+ *
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by the
+ * Free Software Foundation, either version 3 of the License, or (at your
+ * option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+.btn {
+    user-select: none;
+    display: inline-block;
+
+    margin: 0.3em;
+    padding: 0.4em 0.8em;
+
+    border: 0;
+    border-radius: 0.2em;
+
+    font-size: 1em;
+    font-weight: 300;
+    font-family: 'Ubuntu';
+    line-height: 1.4em;
+
+    background: $color_orange;
+    color: #fff;
+
+    cursor: pointer;
+    transition: background 0.1s ease-out;
+
+    // Fix for Firefox
+    &::-moz-focus-inner {
+        padding: 0;
+        border: 0;
+    }
+
+    &:hover {
+        background: mix(#fff, $color_orange, 20%);
+        text-decoration: none;
+    }
+
+    &.btn-inverse {
+        background: #fff;
+        color: $color_orange;
+
+        &:hover {
+            background: mix(#fff, $color_warm_gray, 80%);
+        }
+    }
+}

scss/theme.scss

@@ -17,6 +17,8 @@
 @import "variables";
 @import "base";
 
+@import "buttons";
+
 @import "cookiepolicy";
 @import "navbar";
 @import "page";