Merge pull request #154 from pietvanzoen:main

Setup .button to match button styles, combine button styling and remove duplicate selectors
kevquirk · May 24, 2023 · 119466e · 119466e
2 parents 00d0a4b + 2cff8a5
commit 119466e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 36 deletions.
diff --git a/index.html b/index.html
@@ -1090,6 +1090,10 @@ <h2>Form elements</h2>
 						<button type="reset">&lt;button type=reset&gt;</button>
 						<button type="button" disabled>&lt;button disabled&gt;</button>
 					</p>
+					<p>
+						<a href="#forms__action" class="button">&lt;a class=button&gt;</a>
+						<a href="#forms__action" class="button" aria-disabled="true">&lt;a class=button aria-disabled=true&gt;</a>
+					</p>
 				</fieldset>
 				<p><a href="#top">[Top]</a></p>
 			</form>

diff --git a/simple.css b/simple.css
@@ -179,7 +179,8 @@ a:hover {
 }
 
 button,
-[role="button"],
+.button,
+a.button, /* extra specificity to override a */
 input[type="submit"],
 input[type="reset"],
 input[type="button"],
@@ -191,22 +192,12 @@ label[type="button"] {
   color: var(--bg);
   padding: 0.7rem 0.9rem;
   margin: 0.5rem 0;
-
-  /* Ensure buttons use correct font */
+  text-decoration: none;
   font-family: inherit;
+  line-height: normal;
 }
 
-button[disabled],
-[role="button"][aria-disabled="true"],
-input[type="submit"][disabled],
-input[type="reset"][disabled],
-input[type="button"][disabled],
-input[type="checkbox"][disabled],
-input[type="radio"][disabled],
-select[disabled] {
-  cursor: not-allowed;
-}
-
+.button[aria-disabled="true"], 
 input:disabled,
 textarea:disabled,
 select:disabled,
@@ -228,7 +219,7 @@ abbr[title] {
 }
 
 button:enabled:hover,
-[role="button"]:not([aria-disabled="true"]):hover,
+.button:not([aria-disabled="true"]):hover,
 input[type="submit"]:enabled:hover,
 input[type="reset"]:enabled:hover,
 input[type="button"]:enabled:hover,
@@ -237,7 +228,8 @@ label[type="button"]:hover {
   cursor: pointer;
 }
 
-button:focus-visible:where(:enabled, [role="button"]:not([aria-disabled="true"])),
+.button:focus-visible,
+button:focus-visible:where(:enabled),
 input:enabled:focus-visible:where(
   [type="submit"],
   [type="reset"],
@@ -657,26 +649,7 @@ dialog::backdrop {
   }
 }
 
-/* Classes for buttons and notices */
-.button,
-.button:visited {
-  display: inline-block;
-  text-decoration: none;
-  border: none;
-  border-radius: 5px;
-  background: var(--accent);
-  font-size: 1rem;
-  color: var(--bg);
-  padding: 0.7rem 0.9rem;
-  margin: 0.5rem 0;
-}
-
-.button:hover,
-.button:focus {
-  filter: brightness(1.4);
-  cursor: pointer;
-}
-
+/* Classes for notices */
 .notice {
   background: var(--accent-bg);
   border: 2px solid var(--border);