minor change

Phoenix/.obsidian/workspace

@@ -4,24 +4,12 @@
     "type": "split",
     "children": [
       {
-        "id": "dab78b76c1738674",
+        "id": "2a83dd53ceb96ad7",
         "type": "leaf",
         "state": {
           "type": "markdown",
           "state": {
-            "file": "cheat sheats/Format your notes.md",
+            "file": "Programing/Html & Css/Recipes/button.md",
-            "mode": "source",
-            "source": false
-          }
-        }
-      },
-      {
-        "id": "f52d40f46fd4e977",
-        "type": "leaf",
-        "state": {
-          "type": "markdown",
-          "state": {
-            "file": "Programing/Vim/plugins keybinding.md",
             "mode": "source",
             "source": false
           }
@@ -89,7 +77,7 @@
             "state": {
               "type": "backlink",
               "state": {
-                "file": "Programing/Vim/plugins keybinding.md",
+                "file": "Programing/Html & Css/Recipes/button.md",
                 "collapseAll": false,
                 "extraContext": false,
                 "sortOrder": "alphabetical",
@@ -106,7 +94,7 @@
             "state": {
               "type": "outgoing-link",
               "state": {
-                "file": "Programing/Vim/plugins keybinding.md",
+                "file": "Programing/Html & Css/Recipes/button.md",
                 "linksCollapsed": false,
                 "unlinkedCollapsed": true
               }
@@ -129,7 +117,7 @@
             "state": {
               "type": "outline",
               "state": {
-                "file": "Programing/Vim/plugins keybinding.md"
+                "file": "Programing/Html & Css/Recipes/button.md"
               }
             }
           },
@@ -149,7 +137,7 @@
     "width": 300,
     "collapsed": true
   },
-  "active": "f52d40f46fd4e977",
+  "active": "2a83dd53ceb96ad7",
   "lastOpenFiles": [
     "cheat sheats/Format your notes.md",
     "Programing/Vim/plugins keybinding.md",

Phoenix/Programing/Html & Css/Recipes/button.md

@@ -74,3 +74,137 @@ for each option add to class or id
 
 ## Change the Size of Buttons
 
+# unsorted
+
+The way to create more space inside the button's borders is to increase the `padding` of the button.
+
+Below I added a value of 15px for the top, bottom, right, and left padding of the button.
+
+I also set a minimum height and width, with the `min-height` and `min-width` properties respectively. Buttons need to be large enough for all different kind of devices.
+
+```css
+.button {
+    position: absolute;
+    top:50%;
+    background-color:#0a0a23;
+    color: #fff;
+    border:none; 
+    border-radius:10px; 
+    padding:15px;
+    min-height:30px; 
+    min-width: 120px;
+  }
+```
+
+![Screenshot-2022-02-06-at-10.42.58-PM|500](https://www.freecodecamp.org/news/content/images/2022/02/Screenshot-2022-02-06-at-10.42.58-PM.png)
+
+## How to Style Button States
+
+Buttons have three different states:
+
+-   `:hover`
+-   `:focus`
+-   `:active`
+
+It's best that the three states are styled differently and don't share the same styles.
+
+In the following sections I'll give a brief explanation on what each one of the states mean and what triggers them. You'll also see some ways you can style the button for each separate state.
+
+### How to Style `:hover` States
+
+The `:hover` state becomes present when a user hovers over a button, by bringing their mouse or trackpad over it, without selecting it or clicking on it.
+
+To change the button's styles when you hover over it, use the `:hover` CSS  
+pseudoclass selector.
+
+A common change to make with `:hover` is switching the background-color of the button.
+
+To make the change less sudden, pair `:hover` with the `transition` property.
+
+The `transition` property will help make the _transition_ from no state to a `:hover` state much smoother.
+
+The change of background color will happen a bit slower than it would without the `transition` property. This will also help make the end result less jarring for the user.
+
+```css
+.button:hover {
+      background-color:#002ead;
+      transition: 0.7s;
+  }
+```
+
+In the example above, I used a Hex color code value to make the background color a lighter shade for when I hover over the button.
+
+With the help of the `transition` property I also caused a delay of `0.7s` when the transition from no state to a `:hover` state happens. This caused a slower transition from the original `#0a0a23` background color to the `#002ead` background color.
+
+![hover|650](https://www.freecodecamp.org/news/content/images/2022/02/hover-2.gif)
+
+Keep in mind that the `:hover` pseudoclass does not work for mobile device screens and mobile apps. Choose to use hover effects only for desktop web applications and not touch screens.
+
+### How to Style `:focus` States
+
+The `:focus` state takes effect for keyboard users - specifically it will activate when you focus on a button by hitting the `Tab` key (`⇥`).
+
+If you're following along, when you focus on the button after pressing the `Tab` key, you'll see the following:
+
+![focus-5|500](https://www.freecodecamp.org/news/content/images/2022/02/focus-5.gif)
+
+Notice the slight light blue outline around the button when it's gained focus?
+
+Browsers have default styling for the `:focus` pseudoclass, for accessibility keyboard navigation purposes. It's not a good idea to remove that `outline` altogether.
+
+You can however create custom styles for it and make it easily detectable.
+
+A way to do so is by setting the outline color to first be `transparent`.
+
+Following that, you can maintain the `outline-style` to `solid`. Lastly, using the `box-shadow` property, you can add a color of your liking for when the element is focused on:
+
+```css
+ .button:focus {
+    outline-color: transparent;
+    outline-style:solid;
+    box-shadow: 0 0 0 4px #5a01a7;
+}
+```
+
+![focusend](https://www.freecodecamp.org/news/content/images/2022/02/focusend.gif)
+
+You can also again pair these styles with the `transition` property, depending on the effect you want to achieve:
+
+```css
+  .button:focus {
+    outline-color: transparent;
+    outline-style:solid;
+    box-shadow: 0 0 0 4px #5a01a7;
+    transition: 0.7s;
+}
+```
+
+![focusend1](https://www.freecodecamp.org/news/content/images/2022/02/focusend1.gif)
+
+### How to Style for the `:active` State
+
+The `:active` state gets _activated_ when you click on the button by either clicking the computer's mouse or pressing down on the laptop's trackpad.
+
+That being said, look at what happens when I click the button after I've applied and kept the styles for the `:hover` and `:focus` states:
+
+![active-1](https://www.freecodecamp.org/news/content/images/2022/02/active-1.gif)
+
+The `:hover` state styles are applied before clicking when I hover over the button.
+
+The `:focus` state styles are applied also, because when a button is clicked it also gains a `:focus` state alongside an `:active` one.
+
+However, keep in mind that they are _not_ the same thing.
+
+`:focus` state is when an element is being focused on and `:active` is when a user `clicks` on an element by holding and pressing down on it.
+
+To change the style for when a user clicks a button, apply styles to the `:active` CSS pseudoselector.
+
+In this case, I've changed the background color of the button when a user clicks on it
+
+```css
+.button:active {
+    background-color: #ffbf00;
+}
+```
+
+![activefinal](https://www.freecodecamp.org/news/content/images/2022/02/activefinal.gif)