Update docs

Readme.md

@@ -70,11 +70,13 @@ If you need to create styles for tags generated by a CMS or markdown wrap them i
 <div class="type">{{ generatedMarkup }}</div>
 ```
 
-## Example
+## Examples
 
-An `h1` might need to be bold & large in some context (at the top of a text page) but might be small and inconspicuous in others (on a settings page in an app).
+### Headings
 
-Creating two different styles for `h1` is made easy as only the styles you need to get the desired visual results have to be applied without the need to overwrite default styles while maintaining semantics.
+An `h1` might need to be bold & large in some context (e.g. at the top of a text page) but might be small and inconspicuous in others (e.g. on a settings page in an app).
+
+Creating two different styles for `h1` is made easy, only the properties for the respective desired visual results have to be applied, there is no need to overwrite default styles, all while maintaining semantics.
 
 ```css
 /* No reseting of the user agent styles necessary,
@@ -105,19 +107,66 @@ Creating two different styles for `h1` is made easy as only the styles you need
 <p class="secondary-title">Other small title</p>
 ```
 
+### Buttons
+
+`button` tags have a lot of default styles that can make them cumbersome to use from a styling perspective, especially if they should look like plain things or need to wrap some other content, but `button` tags are the recommended elements to use as click targets for user interactions. Falling back to using `<a href="#">` even with `role="button"` is [not recomended](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role) from a accessibility standpoint as Screenreaders will recognize `button`s as interactive elements by default and treat them accordingly. `a` should be used when there is the need to link to a page via `href`.
+
+destyle.css resets buttons completely to make them usable as any other element <small>* see note [below](#caveats)</small>.
+
+```css
+/* Make anything look like a link, even a <button> */
+.link {
+  color: lightblue;
+  text-decoration: underline;
+}
+
+/* Make anything look like a button
+ * font styles will be inheritet from the parent */
+.btn {
+  padding: 0.2em 0.5em;
+  border-radius: 0.2em;
+  background-color: blue;
+  color: white;
+  text-align: center
+}
+
+.block {
+  display: block;
+}
+```
+
+```html
+<!-- Make it look like a link -->
+<button class="link">Interactive link</button>
+
+<!-- Make anchor look like a button -->
+<a href="page.html" class="btn">Link that looks like a button</a>
+
+<!-- Use as block level element -->
+<button class="block">
+  <img src="..." alt="...">
+</button>
+```
+
 How to create the styles is up to the author, it can be by creating classes, compose style using functional classes, styling inside a react component, etc. In any case the author always gets a clean slate for styling each element and it is up to him/her to reuse the styles or start from scratch for every instance.
 
-## Rules & Caveats
+## Rules
 
-- The box model is reset to `border-box` using the `*` selector
-- `button` and `input` are also reset (as much as possible)
-- `code`, `pre`, `kbd`, `samp` maintain a monospaced font-family
-- `hr` is set to be a solid 1px line that inherits its color from its parent's text color
+- The box model is set to `border-box` for `*`, `::before` and `::after`.
+- `code`, `pre`, `kbd`, `samp` maintain a monospaced font-family.
+- `hr` is set to be a solid 1px line using `border-top` that inherits its color from its parent's `color` property.
 - Inline elements that carry style (`b`, `i`, `strong`, etc.) are not reset.
+- `canvas` and `iframe` maintain their default width and height (varies depending on the browser).
+- `button`, `select`, `textarea` and `input` (all types), are reset using `appearance: none`.
+- `[type='checkbox']` and `[type='radio']` are set to `appearance: checkbox` and `appearance: radio` respectively (overwriting `appearance: none`) to prevent them from disappearing in iOS.
 - `textarea` maintains its default height.
-- `canvas` and `iframe` maintain their default width and height.
-- `select` is reset using `appearance: none` which is not cross-browser, be advised when styling custom selects. You can find a good guide [here](https://www.filamentgroup.com/lab/select-css.html)
-- HTML5 inputs and elements like `range`, `color`, `meter` and `progress` are not reset.
+- `meter` and `progress` elements are not reset.
+
+## Caveats
+
+- `select` elements are not completely destyled by `appearance: none` (varies depending on the browser). You can find a good guide for custom styling `select`s [here](https://www.filamentgroup.com/lab/select-css.html).
+- `range`, `color` are affected by `appearance: none` but are not completely destyled (varies depending on the browser).
+- `button` elements that have a fixed `height` will center its content vertically (can not be reset).
 
 ## Credits