├── .gitignore
├── CSS Tricks #1
├── index.html
└── style.css
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_STORE
--------------------------------------------------------------------------------
/CSS Tricks #1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Morphing Pager | AsmrProg
10 |
11 |
12 |
13 |
14 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/CSS Tricks #1/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | margin: 0;
3 | display: grid;
4 | place-items: center;
5 | background: #000;
6 | }
7 |
8 | html, body{
9 | height: 100%;
10 | }
11 |
12 | .pager{
13 | width: 250px;
14 | display: flex;
15 | align-items: center;
16 | justify-content: center;
17 | }
18 |
19 | .pager button{
20 | flex: 0 0 42px;
21 | height: 42px;
22 | border: 0;
23 | padding: 6px;
24 | background: transparent;
25 | cursor: pointer;
26 | transition: 0.4s;
27 | }
28 |
29 | .pager button span{
30 | display: block;
31 | height: 30px;
32 | width: 100%;
33 | border-radius: 15px;
34 | background: #383142;
35 | transition: 0.4s;
36 | }
37 |
38 | .pager button:focus{
39 | flex: 0 0 80px;
40 | }
41 |
42 | .pager button:focus span{
43 | background: #00c853;
44 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | A collection of CSS tricks for web developers (Ready to use codes).
--------------------------------------------------------------------------------