Skip to content

Commit 04a9125

Browse files
swanie21swanie21
committed
add buttons with border transitions
1 parent b073e71 commit 04a9125

11 files changed

+776
-27
lines changed

‎.sass-cache/5d82a4dbdeb96e21b02c4e455b28ce36d7116dbf/background-transition-buttons.scssc

271 Bytes
Binary file not shown.

‎.sass-cache/5d82a4dbdeb96e21b02c4e455b28ce36d7116dbf/border-transition-buttons.scssc

92.4 KB
Binary file not shown.

‎.sass-cache/5d82a4dbdeb96e21b02c4e455b28ce36d7116dbf/main.scssc

149 Bytes
Binary file not shown.

‎.sass-cache/5d82a4dbdeb96e21b02c4e455b28ce36d7116dbf/variables.scssc

178 Bytes
Binary file not shown.

‎index.html

+42-23
Original file line numberDiff line numberDiff line change
@@ -8,29 +8,6 @@
88
<link rel="stylesheet" href="styles/main.css">
99
</head>
1010
<body>
11-
<section>
12-
<h1>Background Transitions</h1>
13-
<button class="button1" type="button" name="button">Transition Duration 0.3s</button>
14-
<button class="button2" type="button" name="button">Transition Duration 1s</button>
15-
<button class="button3" type="button" name="button">Transition Delay 0.5s</button>
16-
<button class="button4" type="button" name="button">Multiple Transitions</button>
17-
<button class="button5" type="button" name="button">Sweep to Right</button>
18-
<button class="button6" type="button" name="button">Sweep to Left</button>
19-
<button class="button7" type="button" name="button">Sweep to Bottom</button>
20-
<button class="button8" type="button" name="button">Sweep to Top</button>
21-
<button class="button9" type="button" name="button">Horizontal Outer Sweep</button>
22-
<button class="button10" type="button" name="button">Horizontal Inner Sweep</button>
23-
<button class="button11" type="button" name="button">Vertical Outer Sweep</button>
24-
<button class="button12" type="button" name="button">Vertical Inner Sweep</button>
25-
<button class="button13" type="button" name="button">Bounce to Right</button>
26-
<button class="button14" type="button" name="button">Bounce to Left</button>
27-
<button class="button15" type="button" name="button">Bounce to Bottom</button>
28-
<button class="button16" type="button" name="button">Bounce to Top</button>
29-
<button class="button17" type="button" name="button">Rectangle In</button>
30-
<button class="button18" type="button" name="button">Rectangle Out</button>
31-
<button class="button19" type="button" name="button">Radial In</button>
32-
<button class="button20" type="button" name="button">Radial Out</button>
33-
</section>
3411
<section class="animation-buttons">
3512
<h1>2D Animations</h1>
3613
<button class="animationButton1" type="button" name="button">Float Right</button>
@@ -60,5 +37,47 @@ <h1>2D Animations</h1>
6037
<button class="animationButton25" type="button" name="button">Bounce Out</button>
6138
<button class="animationButton26" type="button" name="button">Bob</button>
6239
</section>
40+
<section>
41+
<h1>Background Transitions</h1>
42+
<button class="button1" type="button" name="button">Transition Duration 0.3s</button>
43+
<button class="button2" type="button" name="button">Transition Duration 1s</button>
44+
<button class="button3" type="button" name="button">Transition Delay 0.5s</button>
45+
<button class="button4" type="button" name="button">Multiple Transitions</button>
46+
<button class="button5" type="button" name="button">Sweep to Right</button>
47+
<button class="button6" type="button" name="button">Sweep to Left</button>
48+
<button class="button7" type="button" name="button">Sweep to Bottom</button>
49+
<button class="button8" type="button" name="button">Sweep to Top</button>
50+
<button class="button9" type="button" name="button">Horizontal Outer Sweep</button>
51+
<button class="button10" type="button" name="button">Horizontal Inner Sweep</button>
52+
<button class="button11" type="button" name="button">Vertical Outer Sweep</button>
53+
<button class="button12" type="button" name="button">Vertical Inner Sweep</button>
54+
<button class="button13" type="button" name="button">Bounce to Right</button>
55+
<button class="button14" type="button" name="button">Bounce to Left</button>
56+
<button class="button15" type="button" name="button">Bounce to Bottom</button>
57+
<button class="button16" type="button" name="button">Bounce to Top</button>
58+
<button class="button17" type="button" name="button">Rectangle In</button>
59+
<button class="button18" type="button" name="button">Rectangle Out</button>
60+
<button class="button19" type="button" name="button">Radial In</button>
61+
<button class="button20" type="button" name="button">Radial Out</button>
62+
</section>
63+
<section>
64+
<h1>Border Transitions</h1>
65+
<button class="borderButton1" type="button" name="button">Fade In</button>
66+
<button class="borderButton2" type="button" name="button">Hollow Out</button>
67+
<button class="borderButton3" type="button" name="button">Inset Border</button>
68+
<button class="borderButton4" type="button" name="button">Outline Out</button>
69+
<button class="borderButton5" type="button" name="button">Outline In</button>
70+
<button class="borderButton6" type="button" name="button">Ripple Out</button>
71+
<button class="borderButton7" type="button" name="button">Ripple In</button>
72+
<button class="borderButton8" type="button" name="button">Underline from Left</button>
73+
<button class="borderButton9" type="button" name="button">Underline from Right</button>
74+
<button class="borderButton10" type="button" name="button">Underline from Center</button>
75+
<button class="borderButton11" type="button" name="button">Overline from Left</button>
76+
<button class="borderButton12" type="button" name="button">Overline from Right</button>
77+
<button class="borderButton13" type="button" name="button">Round Corners</button>
78+
<button class="borderButton14" type="button" name="button">Reveal</button>
79+
<button class="borderButton15" type="button" name="button">Underline Reveal</button>
80+
<button class="borderButton16" type="button" name="button">Overline Reveal</button>
81+
</section>
6382
</body>
6483
</html>

‎styles/background-transition-buttons.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@ button {
99
color: #111;
1010
font-family: 'Puritan', sans-serif;
1111
font-size: 20px;
12+
outline: none;
1213
padding: 15px;
13-
margin: 5px;
14+
margin: 6px;
1415
}
1516

1617
.button1 {

0 commit comments

Comments
 (0)