Add like and nolike button styles

makeitrealcamp · Oct 10, 2014 · 9f457b9 · 9f457b9
1 parent 54056c5
commit 9f457b9
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git a/app/assets/images/like.png b/app/assets/images/like.png
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -35,7 +35,6 @@ header a {
   display: block;
   float: right;
 }
-
 header img {
   height: 30px;
   display: block;
@@ -51,6 +50,22 @@ figure {
 figure img {
   height: 300px;
 }
+figure button {
+  margin-left: 20px;
+  text-align: right;
+  height: 50px;
+  width: 120px;
+  background: url(like.png) no-repeat;
+  cursor: pointer;
+}
+figure button:hover {
+  text-decoration: underline;
+}
+.like {
+  background-position: 0 -50px;
+}
+.nolike {
+}
 
 footer {
   position: absolute;

diff --git a/app/views/friends/index.html.erb b/app/views/friends/index.html.erb
@@ -1,4 +1,7 @@
 <figure>
   <%= image_tag Gravatar.new(@friend.email).image_url(s: 300) %>
   <p><%= @friend.name %>, <strong><%= @friend.age %> años</strong></p>
+
+  <button class="like">Me gusta</button>
+  <button class="nolike">No Me gusta</button>
 </figure>