adding a little ux to the download video and transcript links

common/lib/xmodule/xmodule/css/video/display.scss

@@ -27,6 +27,29 @@ div.video {
     height: 0px;
   }
 
+  .video-sources,
+  .video-tracks {
+    display: inline-block;
+
+    p {
+      margin: ($baseline*.75) ($baseline/2) 0 0;
+      display: inline-block;
+    }
+
+    a {
+      display: inline-block;
+      border-radius: 3px 3px 3px 3px;
+      background-color: $shadow-l1;
+      padding: ($baseline*.75);
+
+      &:hover {
+        background-color: $blue;
+        color: $white;
+      }
+    }
+
+  }
+
   article.video-wrapper {
     float: left;
     margin-right: flex-gutter(9);

lms/templates/video.html

@@ -76,16 +76,19 @@
     </div>
 
     <div class="focus_grabber last"></div>
-</div>
 
 % if sources.get('main'):
     <div class="video-sources">
-        <p>${(_('Download video') + ' <a href="%s">' + _('here') + '</a>.') % sources.get('main')}</p>
+        <p>${('<a href="%s">' + _('Download video') + '</a>') % sources.get('main')}</p>
     </div>
 % endif
 
 % if track:
     <div class="video-tracks">
-        <p>${(_('Download subtitles') + ' <a href="%s">' + _('here') + '</a>.') % track}</p>
+        <p>${('<a href="%s">' + _('Download timed transcript') + '</a>') % track}</p>
     </div>
 % endif
+
+</div>
+
+