made custom css3 buttons (pending FF compatability; works in webkit for now.)

app/views/albums/index.html.haml

@@ -2,7 +2,10 @@
   = friends_albums_link
   \/ 
   =your_albums_link
-  %span= link_to ' + ', new_album_path
+
+  .button.right
+    = link_to 'new album', new_album_path
+
 
 
 %ul#stream

app/views/albums/show.html.haml

@@ -2,11 +2,23 @@
   = link_to 'albums', albums_path
   >>
   = @album.name 
-  %h4= "last updated: #{how_long_ago(@album)}"
+
+  .button.right{ :id => "add_photos_button" }
+    = link_to 'add photos', '#'
+
+%h4= "last updated: #{how_long_ago(@album)}"
+
 -unless mine? @album
   %h4= 'by ' + @album.person.real_name
+
+
+
 -if mine? @album
-  = render "photos/new_photo", :photo => @photo, :album => @album
+  #add_photo_box{ :style => "display:none;" }
+    = render "photos/new_photo", :photo => @photo, :album => @album
+
+
+
 - for photo in @album_photos
   = link_to (image_tag photo.image.url(:thumb_medium)), object_path(photo)
 

public/javascripts/view.js

@@ -88,4 +88,9 @@ $(document).ready(function(){
     speed: 3000
   });
 
+
+  $("#add_photos_button").click(function(){
+    $("#add_photo_box").fadeIn(300);
+  });
+
 });//end document ready

public/stylesheets/application.css

@@ -343,3 +343,34 @@ ul#publisher_content_pickers li {
 .field_with_submit input[type='text'] {
   width: 85%;
   display: inline; }
+
+.button {
+  font-size: 12px;
+  line-height: 100%;
+  text-shadow: 0 1px 0 white;
+  color: #666666;
+  background: -webkit-gradient(linear, 0% 29%, 0% 85%, from(#fafafa), to(#e0e0e0));
+  padding: 5px;
+  height: 14px;
+  display: inline;
+  border: 1px solid #cccccc;
+    border-bottom: 1px solid #666666;
+    border-left: 1px solid #999999;
+    border-right: 1px solid #999999;
+    border-radius: 3px;
+  box-shadow: 0 1px 1px #cccccc;
+  -webkit-box-shadow: 0 1px 1px #cccccc;
+  -moz-box-shadow: 0 1px 1px #cccccc;
+  cursor: pointer; }
+  .button:active {
+    box-shadow: 0 0px 2px black;
+    -webkit-box-shadow: 0 0px 2px black;
+    -moz-box-shadow: 0 0px 2px black;
+    color: #555555; }
+  .button a {
+    display: block;
+    color: #444444; }
+
+.right {
+  float: right;
+  margin-top: 6px; }

public/stylesheets/sass/application.sass

@@ -421,3 +421,55 @@ ul#publisher_content_pickers li
   input[type='text']
     :width 85%
     :display inline 
+
+.button
+  :font
+    :size 12px
+
+  :line-height 100%
+
+  :text
+    :shadow 0 1px 0 #fff
+
+  :color #666
+
+  :background -webkit-gradient(linear, 0% 29%, 0% 85%, from(#FAFAFA), to(#E0E0E0))
+
+  :padding 5px
+  :height 14px
+
+  :display inline
+
+  :border 1px solid #ccc
+    :bottom 1px solid #666
+    :left 1px solid #999
+    :right 1px solid #999
+    :radius 3px
+
+  :box-shadow 0 1px 1px #ccc
+  :-webkit-box-shadow 0 1px 1px #ccc
+  :-moz-box-shadow 0 1px 1px #ccc
+
+  :cursor pointer
+
+  &:active
+    :box-shadow 0 0px 2px #000
+    :-webkit-box-shadow 0 0px 2px #000
+    :-moz-box-shadow 0 0px 2px #000
+
+    :color #555
+
+  a
+    :display block
+    :color #444
+
+
+.right
+  :float right
+  :margin
+    :top 6px
+
+    
+
+
+