Playing with buttons

TrackDons · Feb 17, 2015 · a00ad8f · a00ad8f
1 parent 1292bb3
commit a00ad8f
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 33 deletions.
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
@@ -38,7 +38,25 @@ ul, li { font-size: 100%; line-height: 100%; }
 #container { background: #F8F2E3; border-color: #E4D6B3; }
 #header { background: $main-color; color: #FFF; }
 #header a { color: #FFF; }
-button, .button, input[type='submit'] { background: $main-color; color: #FFF; }
+button, .button, input[type='submit'] { 
+  background: $main-color; 
+  color: #FFF;
+  display: inline-block;
+  padding: .6em 2em .4em;
+  text-decoration: none;
+  border-radius: 3px;
+  border: 0;
+  border-bottom: 2px solid darken($main-color, 10%);
+  transition: all 0.3s ease 0s;
+  font-size: 1em; 
+  font-weight: bold;
+
+  &:hover {
+    /*text-decoration: underline;*/
+    cursor: pointer;
+    background: darken($main-color, 3%);
+  }
+}
 a.button, .donation a.button, a.button:visited, .donation a.button:visited { text-decoration: none; color: #FFF; }
 .content_full { background: #EBE8CC; }
 #track_donation header h2, h1 { border-color: $main-color; color: $main-color; }
@@ -100,10 +118,16 @@ body .tipsy { font-size: 11px; }
 .content_full {  }
 
 /* forms */
-button, .button, input[type='submit'] { margin: 10px 0 20px 0; border: 0; padding: 10px 16px; font-size: 14px; display: inline-block; }
-form.simple_form { width: 400px}
+button, .button, input[type='submit'] { 
+/*  margin: 10px 0 20px 0; 
+  border: 0; 
+  padding: 10px 16px; 
+  font-size: 14px; 
+  display: inline-block; 
+*/}
+form.simple_form { width: 400px; margin-bottom: 2em; }
 form.simple_form input, form.simple_form textarea { width: 94%; padding: 4px; font-size: 1em;}
-form.simple_form input[type='submit'] { padding: 8px; font-weight: bold; }
+form.simple_form input[type='submit'] { /*padding: 8px; font-weight: bold;*/ }
 form.simple_form input[type='checkbox'] { width: auto; }
 form.simple_form textarea { height: 100px; }
 form.simple_form input[type='submit'] { width: 40%;}
@@ -284,19 +308,6 @@ hr { height: 1px; border:0; background-color: #D9DAAA; margin: 60px 0px 15px; wi
   }
 }
 
-a.cta {
-  background: $main-color; 
-  color: #FFF;
-  display: inline-block;
-  margin: 0 1em;
-  padding: .5em 2em;
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
 #share_block { 
   background-color: #D9DAAA; 
   padding: 20px;
@@ -314,17 +325,9 @@ a.cta {
   li { 
     width: 29%; 
     margin-right: 26px; 
-    background-color: $main-color; 
     text-align: center;
     display: inline-block;
-
-    a, a:visited { 
-      display: block; 
-      color: #fff; 
-      font-size: 14px; 
-      font-weight: 500; 
-      line-height: 30px;
-    }
+    font-size: .9em;
   }
   li:last-child { 
     margin-right: 0px; 

diff --git a/app/views/donations/_form.html.erb b/app/views/donations/_form.html.erb
@@ -79,7 +79,7 @@
     <%= hidden_field_tag :back_url, project_path(@project) %>
   <% end %>
 
-  <%= f.submit(donation_form_button_text, class: 'big' ) %>
+  <%= f.submit(donation_form_button_text, class: 'big mb4' ) %>
   <% if editing_donation? %>
     <%= link_to(t('.cancel'), @donation) %>
   <% end %>

diff --git a/app/views/donations/show.html.erb b/app/views/donations/show.html.erb
@@ -8,7 +8,7 @@
     <p><big><%= t('.user_is_using', :name => @donation.user.name) %></big></p>
     <p>
       <%= t '.in_which_projects' %>
-      <%= link_to t('.create_your_own'), root_path, :class => "cta ml0 mt3" %>      
+      <%= link_to t('.create_your_own'), root_path, :class => "button ml0 mt3" %>      
     </p>
 
   </section>
@@ -25,14 +25,14 @@
 
     <ul id="share_buttons">
       <li>
-        <%= link_to t('donations.show.share_in_twitter'), "https://twitter.com/home?status=#{u t('donations.show.share_tweet', :url => donation_url(@donation))}", { :class => 'popup' } %>
+        <%= link_to t('donations.show.share_in_twitter'), "https://twitter.com/home?status=#{u t('donations.show.share_tweet', :url => donation_url(@donation))}", { :class => 'button popup' } %>
       </li>
       <li>
-        <%= link_to t('donations.show.share_in_facebook'), "http://www.facebook.com/sharer/sharer.php?u=#{u donation_url(@donation)}", {:class => 'popup' } %>
+        <%= link_to t('donations.show.share_in_facebook'), "http://www.facebook.com/sharer/sharer.php?u=#{u donation_url(@donation)}", {:class => 'button popup' } %>
       </li>
       <li>
         <%= link_to t('donations.show.share_by_email'), 
-        "mailto:?subject=#{u t('donations.show.share_email_subject')}&body=#{u t('donations.show.share_email_body', :project => @donation.project.name, :url => donation_url(@donation))}", { :class => 'popup' } %>
+        "mailto:?subject=#{u t('donations.show.share_email_subject')}&body=#{u t('donations.show.share_email_body', :project => @donation.project.name, :url => donation_url(@donation))}", { :class => 'button popup' } %>
       </li>
     </ul>
 

diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
@@ -10,7 +10,7 @@
     </p>
 
     <p>
-      <%= t '.get_started' %> <%= link_to t('.track_your_first_donation'), track_donation_path, :class => 'cta' %>
+      <%= t '.get_started' %> <%= link_to t('.track_your_first_donation'), track_donation_path, :class => 'button' %>
     </p>
 
   </section>

diff --git a/config/locales/es.yml b/config/locales/es.yml
@@ -79,7 +79,7 @@ es:
       more_donations_by: 'Más donaciones de %{user}'
       other_projects: 'Otros proyectos'
       user_is_using: '%{name} está usando TrackDons para llevar un registro de las donaciones que hace a los proyectos en los que cree.'
-      in_which_projects: En qué proyectos crees tú?
+      in_which_projects: ¿En qué proyectos crees tú?
       create_your_own: Crea tu propio registro y ayuda a tus proyectos favoritos. 
       great_donation_tracked: Bien, tu donación está registrada. Esto es solo el principio.
       be_an_active_promoter: Sé un promotor activo de la donación que has hecho.
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,7 +10,7 @@ @@
         </p>
         <p>
-          <%= t '.get_started' %> <%= link_to t('.track_your_first_donation'), track_donation_path, :class => 'cta' %>
+          <%= t '.get_started' %> <%= link_to t('.track_your_first_donation'), track_donation_path, :class => 'button' %>
         </p>
       </section>
@@ Expand Down @@