1 files changed, 68 insertions, 7 deletions

diff --git a/assets/stylesheets/widget.scss b/assets/stylesheets/widget.scss
index bbd3a9f..e0fa302 100644
--- a/assets/stylesheets/widget.scss
+++ b/assets/stylesheets/widget.scss
@@ -1,4 +1,3 @@
-
 $body-bg: #f7eee1;
 $button-bg: #8b9352;
 $heading-color: #3d3b38;
@@ -6,7 +5,6 @@ $status-success: #aab26e;
 $status-failure: #ff7959;
 $status-pending: #e69e5d;
 
-
 /* CSS Mini Reset */
 
 html, body, div, form, fieldset, legend, label
@@ -45,7 +43,7 @@ body {
     font-size: 1em;
 }
 
-a{ 
+a{
   color: #336c86;
   text-decoration: none;
 }
@@ -56,6 +54,40 @@ a:active {
     color: #333;
 }
 
+/* Button styles */
+.button-base {
+    padding: 0.5em 1.25em;
+    border-radius: 3px;
+    display: inline-block;
+    font-weight: 600;
+    text-decoration: none;
+    transition: background-color 300ms ease-out;
+    margin-bottom: 0;
+    font-size: 0.875em;
+    text-align: center;
+    &:hover,
+    &:active,
+    &:focus {
+        text-decoration: none;
+        transition: background-color 300ms ease-out;
+        cursor: pointer;
+    }
+}
+
+.button-disabled {
+  background-color: #f4f4f4 !important;
+  border: 1px solid #e9e9e9 !important;
+  cursor: default !important;
+  color: #333 !important;
+  font-weight: normal;
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: #f4f4f4 !important;
+    color: #333 !important;
+  }
+}
+
 .alaveteli-widget {
     width: 318px;
     height: 213px;
@@ -129,6 +161,7 @@ a:active {
   text-align: center;
   line-height: 1.3em;
 }
+
 .alaveteli-widget__count {
     font-size: 55px;
     line-height: 55px;
@@ -137,15 +170,43 @@ a:active {
     color: $button-bg;
 }
 
+.alaveteli-widget__bottom {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 72%;
+  padding: 1em 0 0.9em 1em;
+}
+
 .alaveteli-widget__bottom a {
     text-decoration: none;
 }
 
 .alaveteli-widget__button {
-    position: absolute;
-    left: 16px;
-    text-align: center;
-    top: 167px;
+    @extend .button-base;
+    color: #fff;
+    background-color: $button-bg;
+    border: none;
+    position: relative;
+    top: 0.375em;
+    &:hover,
+    &:active,
+    &:focus,
+    &:visited:hover,
+    &:visited:active,
+    &:visited:focus {
+        background-color: darken($button-bg, 10%);
+        color: #fff;
+    }
 }
 
+.alaveteli-widget__button--sign-in-to-track {
+  @extend .alaveteli-widget__button;
+  font-size: 13px;
+}
 
+.alaveteli-widget__button--unsubscribe,
+.alaveteli-widget__button--create-track,
+.alaveteli-widget__button--create-vote {
+  @extend .alaveteli-widget__button;
+}