From 29e2abb8c183012eb7f70a84a693cec20fa22c5f Mon Sep 17 00:00:00 2001
From: Sarah Carney <sacarney@iastate.edu>
Date: Thu, 28 Feb 2019 09:44:58 -0600
Subject: [PATCH] INTERIM-29 Add a class to make a content link look like a
 button. (#191)

* INTERIM-29 Add a class to make a content link look like a button.

* INTERIM-29 Duplicate the button style in ckeditor
---
 ckeditor.css     | 15 +++++++++++++++
 css/suitcase.css | 22 ++++++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/ckeditor.css b/ckeditor.css
index 3d52a4e..796615a 100644
--- a/ckeditor.css
+++ b/ckeditor.css
@@ -25,6 +25,21 @@ blockquote {
 
 blockquote p { margin-top: 0; }
 
+a.link-button {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  color: #ffffff;
+  font-weight: 700;
+  text-decoration: none;
+  background: #cc0000;
+  border-radius: 3px;
+  transition: background 0.2s ease;
+}
+
+a.link-button:hover {
+  background: #333333;
+}
+
 /* -------------------- */
 /* ## General indentation & positioning classes */
 /* -------------------- */
diff --git a/css/suitcase.css b/css/suitcase.css
index b972341..a609a94 100644
--- a/css/suitcase.css
+++ b/css/suitcase.css
@@ -209,6 +209,28 @@ a:hover {
     margin-bottom: 1rem;
 }
 
+/* --- Content Buttons --- */
+/* Add the link-button class to a link in CKEditor to style it like
+ * a button. Remember, the link-button needs to be added to the list of 
+ * allowed classes in the Text Formatter.
+ */
+ 
+a.link-button {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  color: #ffffff;
+  font-weight: 700;
+  text-decoration: none;
+  background: #cc0000;
+  border-radius: 3px;
+  transition: background 0.2s ease;
+}
+
+a.link-button:hover {
+  background: #333333;
+}
+
+
 /* --- Read More --- */
 
 .read-more {