Add omniauth_button() and use some Sass tricks for DRY.

app/assets/stylesheets/application.css.scss.erb

@@ -241,7 +241,22 @@ h2 .scenario, a span.label.scenario {
   width: 200px;
 }
 
-.btn-auth {
+$services:            twitter     37signals   github;
+$service-colors:      #55acee     #8fc857     #444;
+
+@mixin services {
+  @each $service in $services {
+    $i: index($services, $service);
+    $service-color: nth($service-colors, $i);
+
+    &.service-#{$service} {
+      color: #fff;
+      background-color: $service-color;
+    }
+  }
+}
+
+.btn-service {
   position: relative;
   padding-left: 40px;
   $border-color: rgba(0,0,0,0.2);
@@ -260,18 +275,6 @@ h2 .scenario, a span.label.scenario {
     border-right: 1px solid $border-color;
   }
 
-  &.btn-auth-twitter {
-    color: #fff;
-    background-color: #55acee;
-  }
-
-  &.btn-auth-37signals {
-    color: #fff;
-    background-color: #8fc857;
-  }
-
-  &.btn-auth-github {
-    color: #fff;
-    background-color: #444;
-  }
+  @include services;
+}
 }

app/helpers/application_helper.rb

@@ -53,4 +53,11 @@ module ApplicationHelper
   def omniauth_provider_name(provider)
     t("devise.omniauth_providers.#{provider}")
   end
+
+  def omniauth_button(provider)
+    link_to [
+      omniauth_provider_icon(provider),
+      content_tag(:span, "Authenticate with #{omniauth_provider_name(provider)}")
+    ].join.html_safe, user_omniauth_authorize_path(provider), class: "btn btn-default btn-service service-#{provider}"
+  end
 end

app/views/services/index.html.erb

@@ -12,7 +12,7 @@
         for guidance.
       </p>
       <%- Devise.omniauth_providers.each { |provider| -%>
-        <p><%= link_to user_omniauth_authorize_path(provider), class: "btn btn-default btn-auth btn-auth-#{provider}" do %><%= icon_for_service(provider) %><span>Authenticate with <%= t("devise.omniauth_providers.#{provider}") %></span><% end %></p>
+        <p><%= omniauth_button(provider) %></p>
       <%- } -%>
       <hr>