# PREWORK - HMTL/CSS

## First Assignment: button
For your first component, you are asked to build up buttons with the hover effect like the sample below. Hover over them to see the effect.


### Create a button
* First thing first, you have to know what is called <button> in HTML: Read [this](https://www.w3schools.com/tags/tag_button.asp) and watch [How to add button](https://www.youtube.com/watch?v=T13pcI_BmI0)
* Then create a button: `<button>Success</button>`
### Styling
* Give styling for the button within the tag ```<style><style>```

* We’re going to give our buttons some styling. But before that, we give it a `class` or `id` to link that element with our specific attribute in CSS . This code below is how you should write `class` or `id` in a css file. More about [id](https://www.w3schools.com/html/html_id.asp) and [class](https://www.w3schools.com/html/html_classes.asp)

    #id-name {
        property1: value;
        property2: value;
    }
    .class-name {
        property1: value;
        property2: value;
    }

#### **Styling with selector Class:**

`class` is a global attribute. An element in html can have **multiple classes**.

- First let’s give a class for our button

<button class="btn">Button</button>

- Then style them within our CSS. First we want our button has a 1 pixel black solid border, white background color, the text inside should be black and the cursor change to pointer when hover over the button. So we style our class `btn` like below

.btn {
  border: 1px solid black;
  background-color: white;
  color: black;
  cursor: pointer;
}

- CSS attribute: [border](https://www.w3schools.com/css/css_border.asp), [background-color](https://www.w3schools.com/css/css_background.asp) and [color](https://www.w3schools.com/css/css_colors.asp)

- The button look a bit ugly, it's your turn to make it beautiful with the following requirement

.btn {
  border: 1px solid black;
  background-color: white;
  color: black;
/*YOUR CODE HERE/*
	/* 
	- font size of the content inside the button is 16px 
	- corner is rounded by 5px 
	- padding top and bottom: 14px, padding left and right: 28px  
        - margin 10px 
	*/
}

- Read about those attributes here: [font-size](https://www.w3schools.com/cssref/pr_font_font-size.asp), [border-radius](https://www.w3schools.com/cssref/css3_pr_border-radius.asp), [padding](https://www.w3schools.com/css/css_padding.asp) and [margin](https://www.w3schools.com/css/css_margin.asp)

- Ok nice! Now our button looks a bit better with some very basic styling. But still haven't match the requirement. We need to change the border and the content color.

#### **Styling with selector ID**

* `id` is global attribute of html. It specifies a **unique id** for an element through out the whole html file.

* Don't you realize any [differences](https://css-tricks.com/the-difference-between-id-and-class/) between class and id?
- Give your button the right color with the id `success`. Remember we use `#` to select id instead of `.` which is used for class

#success{
	border-color: green;
  color: green;
}

- One last step, when hover over the button, we want the white background color change to green and the content should be white at the time. How can we do that? Read about it [here](https://www.w3schools.com/cssref/sel_hover.asp) and complete the code snippet below:

#success:hover {
  /*YOUR CODE HERE*/
}