From ae52761d5e95d647d7ffcd697f978a7598867a15 Mon Sep 17 00:00:00 2001 From: mohamad24xx Date: Tue, 2 Aug 2022 21:47:01 +0430 Subject: [PATCH] minor change --- Phoenix/.obsidian/workspace | 24 +--- .../Programing/Html & Css/Recipes/button.md | 134 ++++++++++++++++++ 2 files changed, 140 insertions(+), 18 deletions(-) diff --git a/Phoenix/.obsidian/workspace b/Phoenix/.obsidian/workspace index 54be2d1..87bcd36 100644 --- a/Phoenix/.obsidian/workspace +++ b/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", - "mode": "source", - "source": false - } - } - }, - { - "id": "f52d40f46fd4e977", - "type": "leaf", - "state": { - "type": "markdown", - "state": { - "file": "Programing/Vim/plugins keybinding.md", + "file": "Programing/Html & Css/Recipes/button.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", diff --git a/Phoenix/Programing/Html & Css/Recipes/button.md b/Phoenix/Programing/Html & Css/Recipes/button.md index a995933..cce510b 100644 --- a/Phoenix/Programing/Html & Css/Recipes/button.md +++ b/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) \ No newline at end of file