-
Notifications
You must be signed in to change notification settings - Fork 0
/
buttons.html
45 lines (39 loc) · 1.84 KB
/
buttons.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!--Here we are learning to change the appearences of our buttons-->
<!--to change appearence we are writing a new attribute called style-->
<!--in style, button is a CSS selector which targets all the buttons in the page-->
<!--background-color = CSS property, red = CSS value-->
<!--Here, color means the text color-->
<!--px = pixels-->
<!--border-radius is used to give the rounded corners to the buttons-->
<!--Margin-right is used to give some space to the right of the button-->
<!--hovers,transitions and shadows are used to change the appearence of the button when mouse is placed on top of it-->
<!--hover adds extra style in special situations-->
<!--active is when the button is clicked the style changes to blue color background-->
<!--opacity tells the html how see through the button becomes 1 for max, 0 is min-->
<!--transition takes 2 property what we need to transit somety and for how many seconds-->
<!--box-shadow takes 4 attribute right, down, blur and color-->
<!--CSS box models allows us to keep the space inside the button as well as outside on the sides of consequetive buttons-->
<!--we can add space in top, button, left and right of the box model also within the button in all sides-->
<!--by this CSS box we can no longer be neede to give h and w of the button instead hust mention the space around the text in the button to be maintained-->
<!--This is also called padding-->
<!--verical align is to align all the buttons vertically on the top-->
<!DOCTYPE html>
<html>
<head>
<title>
First Buttons
</title>
<link rel="stylessheet" href="buttons.css">
</head>
<body>
<button class="subscribe-button">
SUBSCRIBE
</button>
<button class="JOIN-button">
JOIN
</button>
<button class ="Tweet-button">
Tweet
</button>
</body>
</html>