Today’s goals:

• Learn how to create and style buttons

 Today’s featured website:

• https://studddent.com/– Curated list of student discounts.

 Buttons

• Examples: Let’s look at some buttons on http://fontawesome.io/. Now you find some examples from different websites and share them with the class.
• There is an HTML tag that will create a button. We need to use CSS to style the button to change its color, size, etc.
• Buttons consist of two important parts: the visible text inside the button tag and a link that links the button to another type of content, usually a webpage.
• What CSS properties do you think are used to style buttons? Example: color. What else? What CSS property did you learn last week that could be used to style buttons?
• Let’s look at some button examples before we download our practice code.
• Today’s practice code: Download here, copy and paste into new page in Notepad++, save as buttons.html.
• Let’s add some style changes with the hover pseudo class so the button changes styles when someone hovers their mouse over it.
  1. Let’s change the opacity of .nicebutton when someone hovers their mouse on it. Create a .nicebutton:hover pseudoclass and use opacity: 0.7;
• Now try:
  1. Create a new button with any style properties that you want. Put this button below your other buttons.
  2. Create a new button that links to YouTube and have the text say “YouTube”. You can style this button however you want.
  3. Add the cursor property to the CSS for the button you just created for YouTube so the cursor changes to pointer when someone clicks on the button.
  4. Create a hover pseudoclass for any of your buttons that adds a box-shadow on hover.