turn Try it live link into a button

website/src/docs/dashboard.md

@@ -23,7 +23,7 @@ uppy.use(Dashboard, {
 })
 ```
 
-[Try it live](/examples/dashboard/)
+<a class="TryButton" href="/examples/dashboard/">Try it live</a>
 
 ## Installation
 

website/src/docs/dragdrop.md

@@ -17,7 +17,7 @@ uppy.use(DragDrop, {
 })
 ```
 
-[Try it live](/examples/dragdrop/)
+<a class="TryButton" href="/examples/dragdrop/">Try it live</a>
 
 ## Installation
 

website/src/docs/fileinput.md

@@ -18,7 +18,9 @@ uppy.use(FileInput, {
 })
 ```
 
-[Try it live](/examples/xhrupload) - The `@uppy/xhr-upload` example uses `@uppy/file-input` with the [`pretty`](#pretty-true) option enabled.
+<a class="TryButton" href="/examples/xhrupload/">Try it live</a>
+
+The `@uppy/xhr-upload` example uses `@uppy/file-input` with the [`pretty`](#pretty-true) option enabled.
 
 ## Installation
 

website/src/docs/index.md

@@ -31,7 +31,7 @@ uppy.on('complete', (result) => {
 })
 ```
 
-[Try it live!](/examples/dashboard/)
+<a class="TryButton" href="/examples/dashboard/">Try it live</a>
 
 Drag and drop, webcam, basic file manipulation (adding metadata), uploading via tus-resumable uploads or XHR/Multipart is all possible using just the Uppy client module.
 

website/src/docs/informer.md

@@ -16,7 +16,9 @@ uppy.use(Informer, {
 })
 ```
 
-[Try it live](/examples/dashboard/) - The Informer plugin is included in the Dashboard by default.
+<a class="TryButton" href="/examples/dashboard/">Try it live</a>
+
+The Informer plugin is included in the Dashboard by default.
 
 ## Installation
 

website/src/docs/progressbar.md

@@ -17,7 +17,9 @@ uppy.use(ProgressBar, {
 })
 ```
 
-[Try it live](/examples/dragdrop/) - The `@uppy/drag-drop` example uses a Progress Bar to show progress.
+<a class="TryButton" href="/examples/dragdrop/">Try it live</a>
+
+The `@uppy/drag-drop` example uses a Progress Bar to show progress.
 
 ## Installation
 

website/src/docs/redux.md

@@ -1,7 +1,7 @@
 ---
 title: "Redux"
 type: docs
-permalink: docs/redux
+permalink: docs/redux/
 order: 87
 ---
 
@@ -22,7 +22,7 @@ const reducer = combineReducers({
 
 const uppy = Uppy({
   store: ReduxStore({
-    store: createStore(reducer) // That's a lot of stores!
+    store: createStore(reducer) // That’s a lot of stores!
   })
 })
 ```

website/src/docs/statusbar.md

@@ -18,7 +18,7 @@ uppy.use(StatusBar, {
 })
 ```
 
-[Try it live](/examples/statusbar/)
+<a class="TryButton" href="/examples/statusbar/">Try it live</a>
 
 ## Installation
 

website/src/docs/transloadit.md

@@ -8,7 +8,7 @@ permalink: docs/transloadit/
 
 The `@uppy/transloadit` plugin can be used to upload files to [Transloadit](https://transloadit.com/) for all kinds of processing, such as transcoding video, resizing images, zipping/unzipping, [and more](https://transloadit.com/services/).
 
-[Try it live](/examples/transloadit/)
+<a class="TryButton" href="/examples/transloadit/">Try it live</a>
 
 ```js
 const Transloadit = require('@uppy/transloadit')

website/src/docs/xhrupload.md

@@ -17,7 +17,7 @@ uppy.use(XHRUpload, {
 })
 ```
 
-[Try it live](/examples/xhrupload/)
+<a class="TryButton" href="/examples/xhrupload/">Try it live</a>
 
 ## Installation
 

website/themes/uppy/source/css/_common.scss

@@ -333,7 +333,7 @@ a.button {
   color: $color-light;
   padding-bottom: 3px;
   font-size: .85em;
-  margin: 0 .5em;
+  margin: 0;
   cursor: pointer;
 
   &:first-child { margin-left: 0; }

website/themes/uppy/source/css/_examples.scss

@@ -17,7 +17,7 @@
   @include reset-button;
   padding: 10px 15px;
   border: 1px solid $color-primary;
-  background-transition: all .3s;
+  transition: all .2s;
   font-size: 13px;
   color: $color-primary;
   cursor: pointer;

website/themes/uppy/source/css/_page.scss

@@ -359,3 +359,21 @@
   border-top: 1px solid #e5e5e5;
   font-size: .9em;
 }
+
+.TryButton,
+a.TryButton {
+  @include reset-button;
+  font-size: 0.8em;
+  padding: 7px 16px;
+  border: 1px solid $color-primary;
+  transition: all .2s;
+  color: $color-primary;
+  cursor: pointer;
+  border-radius: 15px;
+  margin-bottom: 1.5em;
+
+  &:hover {
+    background-color: $color-primary;
+    color: $color-white;
+  }
+}