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
isubit · Feb 28, 2019 · 29e2abb · 29e2abb
1 parent eaa9e3c
commit 29e2abb
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git 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
@@ -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 {