├── BUTTONS
├── Button 1
│ ├── index.html
│ └── styles.css
├── Button 102
│ ├── index.html
│ └── style.css
├── Button 104
│ ├── index.html
│ └── styles.css
├── Button 2
│ ├── index.html
│ └── styles.css
├── Button 3
│ ├── index.html
│ └── style.css
├── Button 4
│ ├── index.html
│ └── style.css
├── Button 5
│ ├── index.html
│ └── styles.css
├── Button 6
│ ├── index.html
│ └── style.css
├── Button 7
│ ├── index.html
│ └── styles.css
├── Button 8
│ ├── index.html
│ └── style.css
├── Button 9
│ ├── index.html
│ └── style.css
├── Button100
│ ├── index.html
│ └── styles.css
├── Button101
│ ├── index.html
│ └── styles.css
├── Button102
│ ├── index.html
│ └── styles.css
├── Button103
│ ├── index.html
│ └── styles.css
├── Button105
│ ├── index.html
│ ├── script.js
│ └── style.css
├── Button106
│ ├── index.html
│ └── styles.css
├── Button107
│ ├── button.css
│ └── button.html
├── Button11
│ ├── index.html
│ └── style.css
├── Button12
│ ├── index.html
│ └── style.css
├── Button13
│ ├── index.html
│ └── style.css
├── Button14
│ ├── index.html
│ └── styles.css
├── Button15
│ ├── index.html
│ └── styles.css
├── Button16
│ ├── index.html
│ └── styles.css
├── Button17
│ ├── index.html
│ └── style.css
├── Button18
│ ├── index.html
│ └── styles.css
├── Button19
│ ├── index.html
│ └── styles.css
├── Button20
│ ├── index.html
│ └── style.css
├── Button21
│ ├── index.html
│ └── style.css
├── Button22
│ ├── index.html
│ └── style.css
├── Button23
│ ├── index.html
│ └── style.css
├── Button24
│ ├── index.html
│ └── style.css
├── Button25
│ ├── index.html
│ └── styles.css
├── Button26
│ ├── index.html
│ └── style.css
├── Button27
│ ├── index.html
│ └── style.css
├── Button28
│ ├── index.html
│ └── style.css
├── Button29
│ ├── index.html
│ └── style.css
├── Button30
│ ├── index.html
│ └── style.css
├── Button31
│ ├── index.html
│ └── style.css
├── Button32
│ ├── index.html
│ └── style.css
├── Button33
│ ├── index.html
│ └── style.css
├── Button34
│ ├── index.html
│ └── style.css
├── Button35
│ ├── index.html
│ └── styles.css
├── Button36
│ ├── index.html
│ └── style.css
├── Button37
│ ├── index.html
│ └── style.css
├── Button38
│ ├── index.html
│ └── style.css
├── Button39
│ ├── index.html
│ └── style.css
├── Button40
│ ├── index.html
│ └── style1.css
├── Button41
│ ├── index.html
│ └── style.css
├── Button42
│ ├── index.html
│ └── style.css
├── Button43
│ ├── index.html
│ └── style.css
├── Button44
│ ├── index.html
│ └── style.css
├── Button45
│ ├── index.html
│ └── style.css
├── Button46
│ ├── index.html
│ └── style.css
├── Button47
│ ├── index.html
│ └── styles.css
├── Button48
│ ├── index.html
│ └── style.css
├── Button49
│ ├── index.html
│ └── style.css
├── Button50
│ ├── index.html
│ └── style.css
├── Button51
│ ├── index.html
│ └── style.css
├── Button52
│ ├── index.html
│ └── style.css
├── Button53
│ ├── index.html
│ └── style.css
├── Button54
│ ├── index.html
│ └── style.css
├── Button55
│ ├── index.html
│ └── style.css
├── Button56
│ ├── index.html
│ └── style.css
├── Button57
│ ├── index.html
│ └── style.css
├── Button58
│ ├── index.html
│ └── style.css
├── Button59
│ ├── index.html
│ └── style.css
├── Button60
│ ├── index.html
│ └── styles.css
├── Button61
│ ├── index.html
│ └── styles.css
├── Button62
│ ├── index.html
│ └── style.css
├── Button63
│ ├── index.html
│ └── style.css
├── Button64
│ ├── index.html
│ └── style.css
├── Button65
│ ├── index.html
│ └── style.css
├── Button66
│ ├── index.html
│ └── style.css
├── Button67
│ ├── index.html
│ └── style.css
├── Button68
│ ├── index.html
│ └── style.css
├── Button69
│ ├── index.html
│ └── styles.css
├── Button70
│ ├── index.html
│ └── style.css
├── Button71
│ ├── index.html
│ └── style.css
├── Button72
│ ├── index.html
│ └── style.css
├── Button73
│ ├── index.html
│ ├── script.js
│ └── styles.css
├── Button74
│ ├── index.html
│ └── styles.css
├── Button75
│ ├── index.html
│ └── styles.css
├── Button76
│ ├── index.html
│ └── styles.css
├── Button77
│ ├── butter.png
│ ├── index.html
│ └── styles.css
├── Button78
│ ├── index.html
│ └── styles.css
├── Button79
│ ├── index.html
│ ├── script.js
│ ├── spin.png
│ └── styles.css
├── Button80
│ ├── index.html
│ ├── script.js
│ ├── sound.wav
│ └── styles.css
├── Button81
│ ├── index.html
│ ├── script.js
│ └── styles.css
├── Button82
│ ├── git.png
│ ├── index.html
│ ├── link.png
│ ├── script.js
│ ├── styles.css
│ └── whatsapp.png
├── Button83
│ ├── index.html
│ └── style.css
├── Button84
│ ├── index.html
│ └── styles.css
├── Button85
│ └── button555.html
├── Button86
│ ├── but.css
│ ├── but.html
│ └── but.js
├── Button87
│ ├── index.html
│ └── style.css
├── Button88
│ ├── index.html
│ └── style.css
├── Button89
│ ├── index.html
│ └── style.css
├── Button90
│ ├── index.html
│ └── style.css
├── Button91
│ ├── index.html
│ └── style.css
├── Button92
│ ├── index.html
│ └── style.css
├── Button93
│ ├── index.html
│ └── style.css
├── Button94
│ ├── index.html
│ └── style.css
├── Button95
│ ├── index.html
│ └── style.css
├── Button96
│ ├── index.html
│ └── style.css
├── Button97
│ ├── index.html
│ ├── script.js
│ └── style.css
├── Button98
│ └── index.html
└── Button99
│ ├── index.html
│ ├── script.js
│ └── styles.css
├── README.md
└── static
├── Button Example.png
├── aces-badge.png
└── example.png
/BUTTONS/Button 1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Cool Glowing Button
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/BUTTONS/Button 1/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | height: 100vh;
6 | background-color: #121212;
7 | margin: 0;
8 | }
9 |
10 | .glow-btn {
11 | background: none;
12 | color: #fff;
13 | padding: 15px 30px;
14 | font-size: 20px;
15 | font-family: "Arial", sans-serif;
16 | text-transform: uppercase;
17 | letter-spacing: 2px;
18 | border: 2px solid #00e6e6;
19 | border-radius: 30px;
20 | cursor: pointer;
21 | position: relative;
22 | overflow: hidden;
23 | transition: 0.5s ease;
24 | z-index: 1;
25 | }
26 |
27 | .glow-btn::before {
28 | content: "";
29 | position: absolute;
30 | top: -50%;
31 | left: -50%;
32 | width: 200%;
33 | height: 200%;
34 | background: linear-gradient(
35 | 60deg,
36 | transparent,
37 | rgba(0, 230, 230, 0.5),
38 | transparent
39 | );
40 | transition: 0.5s ease;
41 | z-index: -1;
42 | }
43 |
44 | .glow-btn:hover::before {
45 | left: 50%;
46 | top: 50%;
47 | }
48 |
49 | .glow-btn:hover {
50 | background-color: rgba(0, 230, 230, 0.1);
51 | box-shadow: 0 0 10px #00e6e6, 0 0 40px #00e6e6, 0 0 80px #00e6e6;
52 | }
53 |
--------------------------------------------------------------------------------
/BUTTONS/Button 102/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/BUTTONS/Button 102/style.css:
--------------------------------------------------------------------------------
1 | .btn{
2 | background-color: brown;
3 | color: white;
4 | }
5 | .btn:hover{
6 | background-color: aqua;
7 | color: black;
8 | }
--------------------------------------------------------------------------------
/BUTTONS/Button 104/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Realistic Neumorphism Social Media Share Button
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/BUTTONS/Button 3/style.css:
--------------------------------------------------------------------------------
1 | .container {
2 | position: absolute;
3 | top: 50%;
4 | left: 50%;
5 | transform: translate(-50%, -50%);
6 | text-align: center;
7 | }
8 |
9 | .professional-button {
10 | appearance: button;
11 | background-color: #000;
12 | background-image: none;
13 | border: 1px solid #000;
14 | border-radius: 4px;
15 | box-shadow: #fff 4px 4px 0 0, #000 4px 4px 0 1px;
16 | box-sizing: border-box;
17 | color: #fff;
18 | cursor: pointer;
19 | display: inline-block;
20 | font-family: ITCAvantGardeStd-Bk, Arial, sans-serif;
21 | font-size: 14px;
22 | font-weight: 400;
23 | line-height: 20px;
24 | margin: 0 auto;
25 | overflow: visible;
26 | padding: 12px 40px;
27 | text-align: center;
28 | text-transform: none;
29 | touch-action: manipulation;
30 | user-select: none;
31 | -webkit-user-select: none;
32 | vertical-align: middle;
33 | white-space: nowrap;
34 | }
35 |
36 | .professional-button {
37 | transition: transform 0.3s ease-in-out;
38 | }
39 |
40 | .professional-button:hover {
41 | transform: scale(1.1);
42 | }
43 |
44 | .professional-button:active {
45 | transform: scale(0.9);
46 | box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
47 | outline: 0;
48 | }
49 |
50 | .professional-button:not([disabled]):active {
51 | box-shadow: #fff 2px 2px 0 0, #000 2px 2px 0 1px;
52 | transform: translate(2px, 2px);
53 | }
54 |
55 | @media (min-width: 768px) {
56 | .professional-button {
57 | padding: 12px 50px;
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/BUTTONS/Button 4/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | CSS Animation
9 |
10 |
11 | Hover Me
12 |
13 |
--------------------------------------------------------------------------------
/BUTTONS/Button 4/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | height: 100vh;
3 | display: flex;
4 | justify-content: center;
5 | align-items: center;
6 | height: 100vh;
7 | background-color: #212121;
8 | }
9 |
10 | a {
11 | text-decoration: none;
12 | text-transform: uppercase;
13 | font-size: 22px;
14 | font-family: verdana;
15 | letter-spacing: 3px;
16 | height: 60px;
17 | width: 200px;
18 | line-height: 60px;
19 | text-align: center;
20 | color: #fdc518;
21 | position: relative;
22 | }
23 |
24 | a:before {
25 | content: '';
26 | position: absolute;
27 | height: 90px;
28 | width: 200px;
29 | top: -15px;
30 | left: 0;
31 | border-left: 2px solid red;
32 | border-right: 2px solid #fdc518;
33 | transition: all 0.4s;
34 | }
35 |
36 | a:after {
37 | content: '';
38 | position: absolute;
39 | height: 60px;
40 | width: 230px;
41 | top: 0;
42 | left: -15px;
43 | border-top: 2px solid red;
44 | border-bottom: 2px solid #fdc518;
45 | transition: all 0.4s;
46 | transition-delay: 0.2s;
47 | }
48 |
49 | a:hover:before {
50 | transform: rotateY(180deg);
51 | }
52 |
53 | a:hover:after {
54 | transform: rotateX(180deg);
55 | }
--------------------------------------------------------------------------------
/BUTTONS/Button 5/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Gradient 3D Button
7 |
8 |
9 |
10 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/BUTTONS/Button 5/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | height: 100vh;
12 | background-color: #1d1f20; /* Dark background to emphasize button */
13 | }
14 |
15 | .button-container {
16 | display: flex;
17 | justify-content: center;
18 | align-items: center;
19 | }
20 |
21 | .btn-3d {
22 | padding: 15px 30px;
23 | font-size: 18px;
24 | font-weight: bold;
25 | color: white;
26 | background: linear-gradient(45deg, #ff416c, #ff4b2b); /* Gradient from pink to orange */
27 | border: none;
28 | border-radius: 8px;
29 | position: relative;
30 | text-decoration: none;
31 | box-shadow: 0px 8px 0px #c0392b, 0px 12px 30px rgba(0, 0, 0, 0.3); /* 3D shadow effect */
32 | transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
33 | }
34 |
35 | .btn-3d:before {
36 | content: "";
37 | position: absolute;
38 | top: -4px;
39 | left: -4px;
40 | right: -4px;
41 | bottom: -4px;
42 | background: linear-gradient(45deg, #ff416c, #ff4b2b); /* Match button gradient */
43 | z-index: -1;
44 | border-radius: 8px;
45 | box-shadow: inset 0px 8px 10px rgba(0, 0, 0, 0.3); /* Inner shadow for depth */
46 | }
47 |
48 | .btn-3d:hover {
49 | transform: translateY(-4px); /* Lift effect */
50 | box-shadow: 0px 4px 0px #c0392b, 0px 12px 30px rgba(0, 0, 0, 0.3);
51 | background: linear-gradient(45deg, #4facfe, #00f2fe); /* New gradient on hover: blue to cyan */
52 | }
53 |
54 | .btn-3d:active {
55 | transform: translateY(2px); /* Depressed effect */
56 | box-shadow: 0px 2px 0px #c0392b, 0px 10px 30px rgba(0, 0, 0, 0.3);
57 | }
58 |
59 |
--------------------------------------------------------------------------------
/BUTTONS/Button 6/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Button
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/BUTTONS/Button 6/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: rgb(117, 117, 233);
3 | display: flex;
4 | justify-content: center;
5 | align-items: center;
6 | }
7 |
8 | .btn-booster{
9 | text-decoration: none;
10 | display: inline-block;
11 | border-radius: 40px;
12 | background: white;
13 | color: #2b1055;
14 | font-size: 1.5em;
15 | z-index: 9;
16 | transform: translateY(100px);
17 | }
18 |
19 | .btn-booster:hover {
20 | background-color: blue;
21 | color: white;
22 | cursor: pointer;
23 | }
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/BUTTONS/Button 7/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Magic Animation Button
9 |
10 |
11 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/BUTTONS/Button 8/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | CSS Animation
9 |
10 |
11 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/BUTTONS/Button 9/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 | BUTTON
11 |
12 |
13 |
--------------------------------------------------------------------------------
/BUTTONS/Button 9/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
2 |
3 | *{
4 | margin:0;
5 | padding:0;
6 | box-sizing:border-box;
7 | font-family: 'Poppins',sans-serif;
8 | }
9 | body{
10 | display:flex;
11 | justify-content: center;
12 | align-items: center;
13 | min-height: 100vh;
14 | background:#5f5556;
15 |
16 | }
17 | a{
18 | position: relative;
19 | background: #fff;
20 | color:#ece4e4;
21 | text-decoration: none;
22 | text-transform: uppercase;
23 | font-size: 1.5em;
24 | letter-spacing: 0.1em;
25 | font-weight: 400;
26 | padding:10px 30px;
27 | transition: 0.5s;
28 | border-radius: 8px;
29 | }
30 | a:hover{
31 | letter-spacing: 0.5em;
32 | background: #581f0f;
33 | box-shadow: 0 0 35px #581f0f ;
34 | }
35 | a:before{
36 | content:'';
37 | position:absolute;
38 | inset:2px;
39 | background:#3c3d41;
40 | }
41 | a i{
42 | position:absolute;
43 | inset:0;
44 | display:block;
45 |
46 | }
47 | a i::before{
48 | content:'';
49 | position:absolute;
50 | top:0;
51 | left:80%;
52 | width:10px;
53 | height:4px;
54 | background:#b4b6be;
55 | transform:translateX(-50%) skewX(325deg);
56 | transition:0.5s;
57 | }
58 | a:hover i::before{
59 | width:20px;
60 | left:20%;
61 | }
62 |
--------------------------------------------------------------------------------
/BUTTONS/Button100/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Anatomy of a Button
7 |
8 |
9 |
10 |
47 |
48 |
--------------------------------------------------------------------------------
/BUTTONS/Button101/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Complex CSS Button
7 |
8 |
9 |
10 |
11 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/BUTTONS/Button101/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | min-height: 100vh;
6 | background: #1a1a1a;
7 | margin: 0;
8 | font-family: Arial, sans-serif;
9 | }
10 |
11 | .btn-container {
12 | perspective: 1000px;
13 | }
14 |
15 | .btn {
16 | position: relative;
17 | display: inline-block;
18 | padding: 15px 30px;
19 | color: #fff;
20 | font-size: 20px;
21 | font-weight: bold;
22 | text-transform: uppercase;
23 | background: linear-gradient(135deg, #ff8a00, #e52e71);
24 | border: none;
25 | border-radius: 8px;
26 | box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
27 | cursor: pointer;
28 | overflow: hidden;
29 | transition: transform 0.3s ease, box-shadow 0.3s ease;
30 | }
31 |
32 | .btn:before, .btn:after {
33 | content: '';
34 | position: absolute;
35 | width: 200%;
36 | height: 200%;
37 | top: 0;
38 | left: -50%;
39 | background: rgba(255, 255, 255, 0.15);
40 | pointer-events: none;
41 | transform: rotate(45deg);
42 | }
43 |
44 | .btn:before {
45 | animation: moveBg 2s linear infinite;
46 | }
47 |
48 | .btn:after {
49 | opacity: 0;
50 | transition: opacity 0.2s;
51 | }
52 |
53 | .btn:hover {
54 | transform: translateY(-5px) scale(1.05);
55 | box-shadow: 0 20px 35px rgba(0, 0, 0, 0.3);
56 | }
57 |
58 | .btn:active {
59 | transform: translateY(3px);
60 | box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
61 | }
62 |
63 | .btn:hover:after {
64 | opacity: 1;
65 | }
66 |
67 | .btn-text {
68 | position: relative;
69 | z-index: 2;
70 | display: inline-block;
71 | transition: transform 0.2s ease;
72 | }
73 |
74 | .btn:hover .btn-text {
75 | transform: scale(1.05);
76 | }
77 |
78 | @keyframes moveBg {
79 | 0% { transform: translate(-50%, -50%) rotate(45deg); }
80 | 100% { transform: translate(50%, 50%) rotate(45deg); }
81 | }
82 |
--------------------------------------------------------------------------------
/BUTTONS/Button102/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Apple ka idea chori kiya hua button
8 |
9 |
10 |
13 |
14 |
--------------------------------------------------------------------------------
/BUTTONS/Button102/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: #ffffff; /* Neutral 800 */
3 | display: flex;
4 | justify-content: center;
5 | align-items: center;
6 | height: 100vh;
7 | }
8 |
9 | .custom-button {
10 | position: relative;
11 | background-color: #27272a; /* Neutral 800 */
12 | color: #f9fafb; /* Gray 50 */
13 | border: 1px solid transparent; /* Initial border */
14 | padding: 12px 24px; /* Equivalent to p-3 */
15 | height: 64px; /* h-16 */
16 | width: 256px; /* w-64 */
17 | font-size: 1rem; /* text-base */
18 | font-weight: bold; /* font-bold */
19 | border-radius: 0.5rem; /* rounded-lg */
20 | overflow: hidden;
21 | text-align: left;
22 | text-decoration: underline;
23 | text-underline-offset: 2px; /* underline-offset-2 */
24 | text-decoration-thickness: 0.8px;
25 | transition: all 0.5s ease;
26 | }
27 |
28 | .custom-button:before,
29 | .custom-button:after {
30 | content: '';
31 | position: absolute;
32 | transition: all 0.5s ease;
33 | }
34 |
35 | .custom-button:before {
36 | width: 55px; /* w-12 */
37 | height: 55px; /* h-12 */
38 | background-color: #6a3f96; /* Violet 500 */
39 | border-radius: 50%; /* rounded-full */
40 | right: 8px; /* right-1 */
41 | top: 8px; /* top-1 */
42 | z-index: 10;
43 | filter: blur(8px); /* blur-lg */
44 | }
45 |
46 | .custom-button:after {
47 | width: 80px; /* w-20 */
48 | height: 80px; /* h-20 */
49 | background-color: #fda4af; /* Rose 300 */
50 | border-radius: 50%; /* rounded-full */
51 | right: 32px; /* right-8 */
52 | top: 12px; /* top-3 */
53 | z-index: 10;
54 | filter: blur(8px); /* blur-lg */
55 | }
56 |
57 | .custom-button:hover {
58 | border-color: #fda4af; /* hover:border-rose-300 */
59 | color: #fda4af; /* hover:text-rose-300 */
60 | text-decoration: underline;
61 | text-underline-offset: 4px; /* hover:underline-offset-4 */
62 | text-decoration-thickness: 0.8px;
63 | }
64 |
65 | .custom-button:hover:before {
66 | right: 68px; /* hover:before:right-12 */
67 | bottom: -8px; /* hover:before:-bottom-8 */
68 | filter: blur(4px); /* hover:before:blur */
69 | }
70 |
71 | .custom-button:hover:after {
72 | right: 24px; /* hover:after:-right-8 */
73 | }
--------------------------------------------------------------------------------
/BUTTONS/Button103/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Command Button</Button:submit></Button>
5 |
6 |
7 |
--------------------------------------------------------------------------------
/BUTTONS/Button105/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Toggle Dark/Light Mode
7 |
8 |
9 |
10 |
11 |
Welcome to Dark/Light Mode Toggle
12 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/BUTTONS/Button105/script.js:
--------------------------------------------------------------------------------
1 | const toggleButton = document.getElementById('toggleButton');
2 | const body = document.body;
3 |
4 | toggleButton.addEventListener('click', () => {
5 | // Toggle dark and light mode on the body
6 | body.classList.toggle('dark-mode');
7 | body.classList.toggle('light-mode');
8 |
9 | // Toggle styles on the button
10 | toggleButton.classList.toggle('dark-mode');
11 | toggleButton.classList.toggle('light-mode');
12 | });
13 |
14 | // Set the initial mode to light mode
15 | body.classList.add('light-mode');
16 | toggleButton.classList.add('light-mode');
17 |
--------------------------------------------------------------------------------
/BUTTONS/Button105/style.css:
--------------------------------------------------------------------------------
1 | /* Basic page styling */
2 | body, html {
3 | margin: 0;
4 | padding: 0;
5 | font-family: Arial, sans-serif;
6 | transition: background-color 0.5s ease, color 0.5s ease;
7 | }
8 |
9 | /* Light mode styling */
10 | body.light-mode {
11 | background-color: #f0f0f0;
12 | color: #333;
13 | }
14 |
15 | /* Dark mode styling */
16 | body.dark-mode {
17 | background-color: #333;
18 | color: #f0f0f0;
19 | }
20 |
21 | /* Container styling */
22 | .container {
23 | display: flex;
24 | flex-direction: column;
25 | align-items: center;
26 | justify-content: center;
27 | height: 100vh;
28 | }
29 |
30 | /* Toggle button styling */
31 | .toggle {
32 | position: relative;
33 | width: 100px;
34 | height: 40px;
35 | background-color: #ccc;
36 | border-radius: 20px;
37 | border: none;
38 | outline: none;
39 | cursor: pointer;
40 | display: flex;
41 | align-items: center;
42 | justify-content: center;
43 | transition: background-color 0.3s ease;
44 | }
45 |
46 | /* Light and Dark mode toggle button colors */
47 | .toggle.light-mode {
48 | background-color: #ccc;
49 | }
50 |
51 | .toggle.dark-mode {
52 | background-color: #555;
53 | }
54 |
55 | /* Icon styling */
56 | .icon {
57 | font-size: 18px;
58 | position: absolute;
59 | transition: transform 0.3s ease, opacity 0.3s ease;
60 | }
61 |
62 | /* Position Sun and Moon icons */
63 | .sun {
64 | left: 15px;
65 | opacity: 1;
66 | }
67 |
68 | .moon {
69 | right: 15px;
70 | opacity: 0;
71 | }
72 |
73 | /* Animate Sun and Moon for Dark Mode */
74 | .toggle.dark-mode .sun {
75 | transform: translateX(60px);
76 | opacity: 0;
77 | }
78 |
79 | .toggle.dark-mode .moon {
80 | transform: translateX(-60px);
81 | opacity: 1;
82 | }
83 |
--------------------------------------------------------------------------------
/BUTTONS/Button106/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | Animation Buttons
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/BUTTONS/Button107/button.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | margin: 0;
4 | padding: 0;
5 | width: 100%;
6 | height: 100vh;
7 | display: flex;
8 | flex-direction: row;
9 | justify-content: center;
10 | align-items: center;
11 | background: #000;
12 | }
13 |
14 | .glow-on-hover {
15 | width: 220px;
16 | height: 50px;
17 | border: none;
18 | outline: none;
19 | color: #fff;
20 | background: #111;
21 | cursor: pointer;
22 | position: relative;
23 | z-index: 0;
24 | border-radius: 10px;
25 | }
26 |
27 | .glow-on-hover:before {
28 | content: '';
29 | background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
30 | position: absolute;
31 | top: -2px;
32 | left:-2px;
33 | background-size: 400%;
34 | z-index: -1;
35 | filter: blur(5px);
36 | width: calc(100% + 4px);
37 | height: calc(100% + 4px);
38 | animation: glowing 20s linear infinite;
39 | opacity: 0;
40 | transition: opacity .3s ease-in-out;
41 | border-radius: 10px;
42 | }
43 |
44 | .glow-on-hover:active {
45 | color: #000
46 | }
47 |
48 | .glow-on-hover:active:after {
49 | background: transparent;
50 | }
51 |
52 | .glow-on-hover:hover:before {
53 | opacity: 1;
54 | }
55 |
56 | .glow-on-hover:after {
57 | z-index: -1;
58 | content: '';
59 | position: absolute;
60 | width: 100%;
61 | height: 100%;
62 | background: #111;
63 | left: 0;
64 | top: 0;
65 | border-radius: 10px;
66 | }
67 |
68 | @keyframes glowing {
69 | 0% { background-position: 0 0; }
70 | 50% { background-position: 400% 0; }
71 | 100% { background-position: 0 0; }
72 | }
--------------------------------------------------------------------------------
/BUTTONS/Button107/button.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/BUTTONS/Button11/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Button by Prasad Kandekar
8 |
9 |
10 |
11 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/BUTTONS/Button11/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | height: 100vh;
6 | margin: 0;
7 | background-color: #f4f4f4;
8 | }
9 | button {
10 |
11 | --button_radius: 0.75em;
12 | --button_color: #e8e8e8;
13 | --button_outline_color: #000000;
14 | font-size: 17px;
15 | font-weight: bold;
16 | border: none;
17 | cursor: pointer;
18 | border-radius: var(--button_radius);
19 | background: var(--button_outline_color);
20 | }
21 |
22 | .button_top {
23 | display: block;
24 | box-sizing: border-box;
25 | border: 2px solid var(--button_outline_color);
26 | border-radius: var(--button_radius);
27 | padding: 0.75em 1.5em;
28 | background: var(--button_color);
29 | color: var(--button_outline_color);
30 | transform: translateY(-0.2em);
31 | transition: transform 0.1s ease;
32 | }
33 |
34 | button:hover .button_top {
35 |
36 | transform: translateY(-0.33em);
37 | }
38 |
39 | button:active .button_top {
40 |
41 | transform: translateY(0);
42 | }
43 |
44 |
--------------------------------------------------------------------------------
/BUTTONS/Button12/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Navigation Menu Bar
8 |
9 |
10 |
11 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/BUTTONS/Button12/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | font-family: 'Poppins', sans-serif;
6 | }
7 |
8 | body {
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | min-height: 100vh;
13 | background: #000;
14 | }
15 |
16 | nav {
17 | position: relative;
18 | width: 500px;
19 | height: 50px;
20 | background: #222;
21 | border-radius: 8px;
22 | display: flex;
23 | justify-content: center;
24 | align-items: center;
25 | }
26 |
27 | nav a {
28 | position: relative;
29 | display: inline-block;
30 | font-size: 1em;
31 | font-weight: 500;
32 | color: #fff;
33 | text-decoration: none;
34 | padding: 0 23px;
35 | z-index: 1;
36 | }
37 |
38 | nav span {
39 | position: absolute;
40 | width: 95px; /* Match the width of the first link */
41 | height: 100%;
42 | background: linear-gradient(90deg, #ff105f, #ffad06);
43 | border-radius: 8px;
44 | transition: 0.5s;
45 | left: 0; /* Start at the first link (Home) */
46 | }
47 |
48 | nav a:nth-child(1):hover ~ span {
49 | left: 0;
50 | }
51 |
52 | nav a:nth-child(2):hover ~ span {
53 | left: 90px;
54 | }
55 |
56 | nav a:nth-child(3):hover ~ span {
57 | left: 189px;
58 | width: 94px;
59 | }
60 |
61 | nav a:nth-child(4):hover ~ span {
62 | left: 289px;
63 | width: 98px;
64 | }
65 |
66 | nav a:nth-child(5):hover ~ span {
67 | left: 394px;
68 | width: 100px;
69 | }
70 |
--------------------------------------------------------------------------------
/BUTTONS/Button13/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Button 13 by Prasad kandekar
8 |
9 |
10 |
11 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/BUTTONS/Button13/style.css:
--------------------------------------------------------------------------------
1 | /* From Uiverse.io by sekaiking */
2 | button {
3 | background-color: white;
4 | color: black;
5 | border-radius: 10em;
6 | font-size: 17px;
7 | font-weight: 600;
8 | padding: 1em 2em;
9 | cursor: pointer;
10 | transition: all 0.3s ease-in-out;
11 | border: 1px solid black;
12 | box-shadow: 0 0 0 0 black;
13 | }
14 |
15 | button:hover {
16 | transform: translateY(-4px) translateX(-2px);
17 | box-shadow: 2px 5px 0 0 black;
18 | };
19 |
20 | button:active {
21 | transform: translateY(2px) translateX(1px);
22 | box-shadow: 0 0 0 0 black;
23 | };
24 |
--------------------------------------------------------------------------------
/BUTTONS/Button14/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Button by Siddharth Singh
8 |
9 |
10 |
15 |
--------------------------------------------------------------------------------
/BUTTONS/Button14/styles.css:
--------------------------------------------------------------------------------
1 |
2 | .switch {
3 | --input-focus: #2d8cf0;
4 | --bg-color: #fff;
5 | --bg-color-alt: #666;
6 | --main-color: #323232;
7 | --input-out-of-focus: #ccc;
8 | position: relative;
9 | display: flex;
10 | flex-direction: column;
11 | justify-content: center;
12 | align-items: center;
13 | gap: 30px;
14 | width: 70px;
15 | height: 36px;
16 | transform: translateX(calc(50% - 10px));
17 | }
18 |
19 | .toggle {
20 | opacity: 0;
21 | }
22 |
23 | .slider {
24 | box-sizing: border-box;
25 | border-radius: 100px;
26 | border: 2px solid var(--main-color);
27 | box-shadow: 4px 4px var(--main-color);
28 | position: absolute;
29 | cursor: pointer;
30 | top: 0;
31 | left: 0;
32 | right: 0;
33 | bottom: 0;
34 | background-color: var(--input-out-of-focus);
35 | transition: 0.3s;
36 | }
37 |
38 | .slider:before {
39 | content: "off";
40 | box-sizing: border-box;
41 | height: 30px;
42 | width: 30px;
43 | position: absolute;
44 | left: 2px;
45 | bottom: 1px;
46 | border: 2px solid var(--main-color);
47 | border-radius: 100px;
48 | background-color: var(--bg-color);
49 | color: var(--main-color);
50 | font-size: 14px;
51 | font-weight: 600;
52 | text-align: center;
53 | line-height: 25px;
54 | transition: 0.3s;
55 | }
56 |
57 | .toggle:checked + .slider {
58 | background-color: var(--input-focus);
59 | transform: translateX(-32px);
60 | }
61 |
62 | .toggle:checked + .slider:before {
63 | content: "on";
64 | transform: translateX(32px);
65 | }
--------------------------------------------------------------------------------
/BUTTONS/Button15/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Button
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/BUTTONS/Button15/styles.css:
--------------------------------------------------------------------------------
1 |
2 | button {
3 | position: relative;
4 | overflow: hidden;
5 | border: 1px solid #18181a;
6 | color: #18181a;
7 | display: inline-block;
8 | font-size: 15px;
9 | line-height: 15px;
10 | padding: 18px 18px 17px;
11 | text-decoration: none;
12 | cursor: pointer;
13 | background: #fff;
14 | user-select: none;
15 | -webkit-user-select: none;
16 | touch-action: manipulation;
17 | }
18 |
19 | button span:first-child {
20 | position: relative;
21 | transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1);
22 | z-index: 10;
23 | }
24 |
25 | button span:last-child {
26 | color: white;
27 | display: block;
28 | position: absolute;
29 | bottom: 0;
30 | transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1);
31 | z-index: 100;
32 | opacity: 0;
33 | top: 50%;
34 | left: 50%;
35 | transform: translateY(225%) translateX(-50%);
36 | height: 14px;
37 | line-height: 13px;
38 | }
39 |
40 | button:after {
41 | content: "";
42 | position: absolute;
43 | bottom: -50%;
44 | left: 0;
45 | width: 100%;
46 | height: 100%;
47 | background-color: black;
48 | transform-origin: bottom center;
49 | transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
50 | transform: skewY(9.3deg) scaleY(0);
51 | z-index: 50;
52 | }
53 |
54 | button:hover:after {
55 | transform-origin: bottom center;
56 | transform: skewY(9.3deg) scaleY(2);
57 | }
58 |
59 | button:hover span:last-child {
60 | transform: translateX(-50%) translateY(-50%);
61 | opacity: 1;
62 | transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1);
63 | }
--------------------------------------------------------------------------------
/BUTTONS/Button16/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Button
8 |
9 |
32 |
--------------------------------------------------------------------------------
/BUTTONS/Button16/styles.css:
--------------------------------------------------------------------------------
1 |
2 | .Btn-Container {
3 | display: flex;
4 | width: 170px;
5 | height: fit-content;
6 | background-color: #1d2129;
7 | border-radius: 40px;
8 | box-shadow: 0px 5px 10px #bebebe;
9 | justify-content: space-between;
10 | align-items: center;
11 | border: none;
12 | cursor: pointer;
13 | }
14 | .icon-Container {
15 | width: 45px;
16 | height: 45px;
17 | background-color: #f59aff;
18 | display: flex;
19 | align-items: center;
20 | justify-content: center;
21 | border-radius: 50%;
22 | border: 3px solid #1d2129;
23 | }
24 | .text {
25 | width: calc(170px - 45px);
26 | height: 100%;
27 | display: flex;
28 | align-items: center;
29 | justify-content: center;
30 | color: white;
31 | font-size: 1.1em;
32 | letter-spacing: 1.2px;
33 | }
34 | .icon-Container svg {
35 | transition-duration: 1.5s;
36 | }
37 | .Btn-Container:hover .icon-Container svg {
38 | transition-duration: 1.5s;
39 | animation: arrow 1s linear infinite;
40 | }
41 | @keyframes arrow {
42 | 0% {
43 | opacity: 0;
44 | margin-left: 0px;
45 | }
46 | 100% {
47 | opacity: 1;
48 | margin-left: 10px;
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/BUTTONS/Button17/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/BUTTONS/Button18/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Cool Button
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/BUTTONS/Button18/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | /* Center the button on the screen */
3 | display: flex;
4 | justify-content: center;
5 | align-items: center;
6 | height: 100vh;
7 | background-color: #000; /* Black background for contrast */
8 | margin: 0;
9 | font-family: Arial, sans-serif;
10 | }
11 |
12 | .cool-btn {
13 | padding: 15px 40px;
14 | font-size: 18px;
15 | font-weight: bold;
16 | color: #fff;
17 | background: linear-gradient(45deg, #ff0000, #8b0000); /* Red gradient background */
18 | border: none;
19 | border-radius: 30px; /* Rounded corners for a smooth look */
20 | cursor: pointer;
21 | transition: transform 0.2s ease, box-shadow 0.2s ease;
22 |
23 | /* 3D shadow effect to give depth */
24 | box-shadow: 0px 8px 0px #4b0000, 0px 8px 15px rgba(0, 0, 0, 0.4);
25 | outline: none;
26 | position: relative;
27 | }
28 |
29 | .cool-btn:hover {
30 | /* Lift the button up slightly and increase shadow */
31 | transform: translateY(-4px);
32 | box-shadow: 0px 12px 0px #4b0000, 0px 15px 25px rgba(0, 0, 0, 0.5);
33 | }
34 |
35 | .cool-btn:active {
36 | /* Press the button down slightly to give a click effect */
37 | transform: translateY(2px);
38 | box-shadow: 0px 4px 0px #4b0000, 0px 8px 15px rgba(0, 0, 0, 0.4);
39 | }
40 |
--------------------------------------------------------------------------------
/BUTTONS/Button19/index.html:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/BUTTONS/Button19/styles.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --motion-ease: cubic-bezier(0.68, -0.6, 0.32, 1.6);
3 | --motion-duration: 0.3s;
4 | }
5 |
6 | * {
7 | box-sizing: border-box;
8 | }
9 |
10 | html {
11 | height: 100%;
12 | }
13 |
14 | body {
15 | align-items: center;
16 | background: #252b32;
17 | display: flex;
18 | font-family: 'Rubik', sans-serif;
19 | font-size: clamp(16px, 5vw, 32px);
20 | justify-content: center;
21 | margin: 0;
22 | min-height: 100%;
23 | padding: 1.5em;
24 | }
25 |
26 | button {
27 | appearance: none;
28 | background: transparent;
29 | border: 0;
30 | color: #fff;
31 | cursor: pointer;
32 | font: inherit;
33 | font-weight: 500;
34 | line-height: 1;
35 | padding: 1em 1.5em;
36 | position: relative;
37 | transition: filter var(--motion-duration);
38 | }
39 |
40 | button:hover {
41 | filter: brightness(1.1);
42 | }
43 |
44 | button:active {
45 | filter: brightness(0.9);
46 | }
47 |
48 | button > span {
49 | display: block;
50 | position: relative;
51 | transition: transform var(--motion-duration) var(--motion-ease);
52 | z-index: 1;
53 | }
54 |
55 | button:hover > span {
56 | transform: scale(1.05);
57 | }
58 |
59 | button:active > span {
60 | transform: scale(0.95);
61 | }
62 |
63 | button > svg {
64 | fill: #950cde;
65 | position: absolute;
66 | top: -5%;
67 | left: -5%;
68 | width: 110%;
69 | height: 110%;
70 | }
71 |
72 | button > svg > path {
73 | transition: var(--motion-duration) var(--motion-ease);
74 | }
75 |
76 | button:hover > svg > path {
77 | d: path("M0,0 C0,-5 100,-5 100,0 C105,0 105,100 100,100 C100,105 0,105 0,100 C-5,100 -5,0 0,0");
78 | }
79 |
80 | button:active > svg > path {
81 | d: path("M0,0 C30,10 70,10 100,0 C95,30 95,70 100,100 C70,90 30,90 0,100 C5,70 5,30 0,0");
82 | }
83 |
--------------------------------------------------------------------------------
/BUTTONS/Button20/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Button 18 by Prasad Kandekar
8 |
9 |
10 |
11 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/BUTTONS/Button20/style.css:
--------------------------------------------------------------------------------
1 | /* From Uiverse.io by Spacious74 */
2 | .button {
3 | cursor: pointer;
4 | font-size: 1.4rem;
5 | border-radius: 16px;
6 | border: none;
7 | padding: 2px;
8 | background: radial-gradient(circle 80px at 80% -10%, #ffffff, #181b1b);
9 | position: relative;
10 | }
11 | .button::after {
12 | content: "";
13 | position: absolute;
14 | width: 65%;
15 | height: 60%;
16 | border-radius: 120px;
17 | top: 0;
18 | right: 0;
19 | box-shadow: 0 0 20px #ffffff38;
20 | z-index: -1;
21 | }
22 |
23 | .blob1 {
24 | position: absolute;
25 | width: 70px;
26 | height: 100%;
27 | border-radius: 16px;
28 | bottom: 0;
29 | left: 0;
30 | background: radial-gradient(
31 | circle 60px at 0% 100%,
32 | #3fe9ff,
33 | #0000ff80,
34 | transparent
35 | );
36 | box-shadow: -10px 10px 30px #0051ff2d;
37 | }
38 |
39 | .inner {
40 | padding: 14px 25px;
41 | border-radius: 14px;
42 | color: #fff;
43 | z-index: 3;
44 | position: relative;
45 | background: radial-gradient(circle 80px at 80% -50%, #777777, #0f1111);
46 | }
47 | .inner::before {
48 | content: "";
49 | width: 100%;
50 | height: 100%;
51 | left: 0;
52 | top: 0;
53 | border-radius: 14px;
54 | background: radial-gradient(
55 | circle 60px at 0% 100%,
56 | #00e1ff1a,
57 | #0000ff11,
58 | transparent
59 | );
60 | position: absolute;
61 | }
62 |
63 |
--------------------------------------------------------------------------------
/BUTTONS/Button21/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Sci-Fi Techy Button
7 |
8 |
9 |
10 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/BUTTONS/Button21/style.css:
--------------------------------------------------------------------------------
1 | {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | height: 100vh;
12 | background-color: #0d0d0d; /* Dark background for contrast */
13 | font-family: 'Orbitron', sans-serif; /* Sci-fi font */
14 | }
15 |
16 | .button-container {
17 | display: flex;
18 | justify-content: center;
19 | align-items: center;
20 | }
21 |
22 | .btn-techy {
23 | padding: 15px 40px;
24 | font-size: 20px;
25 | color: #00ffea; /* Neon cyan text */
26 | text-transform: uppercase;
27 | letter-spacing: 2px;
28 | background: none;
29 | border: 2px solid #00ffea;
30 | border-radius: 5px;
31 | text-decoration: none;
32 | position: relative;
33 | transition: 0.4s ease-in-out;
34 | z-index: 1;
35 | overflow: hidden;
36 | }
37 |
38 | .btn-techy:hover {
39 | color: #000;
40 | background: #00ffea;
41 | box-shadow: 0 0 20px rgba(0, 255, 234, 0.8), 0 0 60px rgba(0, 255, 234, 0.5); /* Glowing hover effect */
42 | border-color: #00ffea;
43 | }
44 |
45 | .btn-techy:before {
46 | content: '';
47 | position: absolute;
48 | top: 0;
49 | left: -100%;
50 | width: 100%;
51 | height: 100%;
52 | background: linear-gradient(120deg, transparent, rgba(0, 255, 234, 0.5), transparent);
53 | transition: all 0.6s ease-in-out;
54 | z-index: -1;
55 | }
56 |
57 | .btn-techy:hover:before {
58 | left: 100%;
59 | }
60 |
61 | .btn-techy:after {
62 | content: '';
63 | position: absolute;
64 | top: -2px;
65 | left: -2px;
66 | width: calc(100% + 4px);
67 | height: calc(100% + 4px);
68 | border: 2px solid rgba(0, 255, 234, 0.6);
69 | border-radius: 8px;
70 | transition: 0.4s ease-in-out;
71 | transform: scale(0.9);
72 | z-index: -2;
73 | }
74 |
75 | .btn-techy:hover:after {
76 | transform: scale(1);
77 | box-shadow: 0 0 30px rgba(0, 255, 234, 0.5);
78 | }
79 |
--------------------------------------------------------------------------------
/BUTTONS/Button22/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Glowing Button
7 |
8 |
9 |
10 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/BUTTONS/Button22/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | font-family: 'Verdana', sans-serif;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | background: #282828;
14 | }
15 |
16 | .container {
17 | text-align: center;
18 | }
19 |
20 | .glow-btn {
21 | display: inline-block;
22 | padding: 15px 40px;
23 | font-size: 22px;
24 | font-weight: bold;
25 | color: #fff;
26 | background: linear-gradient(45deg, #ff4b2b, #ff416c);
27 | border: none;
28 | border-radius: 10px;
29 | text-transform: uppercase;
30 | letter-spacing: 3px;
31 | text-decoration: none;
32 | transition: all 0.3s ease;
33 | box-shadow: 0 4px 15px rgba(255, 65, 108, 0.6);
34 | }
35 |
36 | .glow-btn:hover {
37 | box-shadow: 0 8px 30px rgba(255, 65, 108, 0.9);
38 | transform: translateY(-3px);
39 | background: linear-gradient(45deg, #ff416c, #ff4b2b);
40 | }
41 |
--------------------------------------------------------------------------------
/BUTTONS/Button23/style.css:
--------------------------------------------------------------------------------
1 | .btn-cssbuttons {
2 | --btn-color: #275efe;
3 | position: relative;
4 | padding: 16px 32px;
5 | font-family: Roboto, sans-serif;
6 | font-weight: 500;
7 | font-size: 16px;
8 | line-height: 1;
9 | color: white;
10 | background: none;
11 | border: none;
12 | outline: none;
13 | overflow: hidden;
14 | cursor: pointer;
15 | filter: drop-shadow(0 2px 8px rgba(39, 94, 254, 0.32));
16 | transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
17 | }
18 |
19 | .btn-cssbuttons::before {
20 | position: absolute;
21 | content: "";
22 | top: 0;
23 | left: 0;
24 | z-index: -1;
25 | width: 100%;
26 | height: 100%;
27 | background: var(--btn-color);
28 | border-radius: 24px;
29 | transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
30 | }
31 |
32 | .btn-cssbuttons span,
33 | .btn-cssbuttons span span {
34 | display: inline-flex;
35 | vertical-align: middle;
36 | transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
37 | }
38 |
39 | .btn-cssbuttons span {
40 | transition-delay: 0.05s;
41 | }
42 |
43 | .btn-cssbuttons span:first-child {
44 | padding-right: 7px;
45 | }
46 |
47 | .btn-cssbuttons span span {
48 | margin-left: 8px;
49 | transition-delay: 0.1s;
50 | }
51 |
52 | .btn-cssbuttons ul {
53 | position: absolute;
54 | top: 50%;
55 | left: 0;
56 | right: 0;
57 | display: flex;
58 | margin: 0;
59 | padding: 0;
60 | list-style-type: none;
61 | transform: translateY(-50%);
62 | }
63 |
64 | .btn-cssbuttons ul li {
65 | flex: 1;
66 | }
67 |
68 | .btn-cssbuttons ul li a {
69 | display: inline-flex;
70 | vertical-align: middle;
71 | transform: translateY(55px);
72 | transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
73 | }
74 |
75 | .btn-cssbuttons ul li a:hover {
76 | opacity: 0.5;
77 | }
78 |
79 | .btn-cssbuttons:hover::before {
80 | transform: scale(1.2);
81 | }
82 |
83 | .btn-cssbuttons:hover span,
84 | .btn-cssbuttons:hover span span {
85 | transform: translateY(-55px);
86 | }
87 |
88 | .btn-cssbuttons:hover ul li a {
89 | transform: translateY(0);
90 | }
91 |
92 | .btn-cssbuttons:hover ul li:nth-child(1) a {
93 | transition-delay: 0.15s;
94 | }
95 |
96 | .btn-cssbuttons:hover ul li:nth-child(2) a {
97 | transition-delay: 0.2s;
98 | }
99 |
100 | .btn-cssbuttons:hover ul li:nth-child(3) a {
101 | transition-delay: 0.25s;
102 | }
103 |
--------------------------------------------------------------------------------
/BUTTONS/Button24/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Button
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/BUTTONS/Button24/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: rgb(18, 43, 93);
3 | display: flex;
4 | justify-content: center;
5 | align-items: center;
6 | }
7 |
8 | .boton-elegante {
9 | padding: 15px 30px;
10 | border: 2px solid #2c2c2c;
11 | background-color: #1a1a1a;
12 | color: #ffffff;
13 | font-size: 1.2rem;
14 | cursor: pointer;
15 | border-radius: 30px;
16 | transition: all 0.4s ease;
17 | outline: none;
18 | position: relative;
19 | overflow: hidden;
20 | font-weight: bold;
21 | }
22 |
23 | .boton-elegante::after {
24 | content: "";
25 | position: absolute;
26 | top: 0;
27 | left: 0;
28 | width: 100%;
29 | height: 100%;
30 | background: radial-gradient(
31 | circle,
32 | rgba(255, 255, 255, 0.25) 0%,
33 | rgba(255, 255, 255, 0) 70%
34 | );
35 | transform: scale(0);
36 | transition: transform 0.5s ease;
37 | }
38 |
39 | .boton-elegante:hover::after {
40 | transform: scale(4);
41 | }
42 |
43 | .boton-elegante:hover {
44 | border-color: #666666;
45 | background: #292929;
46 | }
47 |
--------------------------------------------------------------------------------
/BUTTONS/Button25/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Interactive Buttons
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/BUTTONS/Button25/styles.css:
--------------------------------------------------------------------------------
1 | /* Base button styles */
2 | .button {
3 | border: none;
4 | color: white;
5 | padding: 15px 32px;
6 | text-align: center;
7 | text-decoration: none;
8 | display: inline-block;
9 | font-size: 16px;
10 | margin: 4px 2px;
11 | cursor: pointer;
12 | border-radius: 5px;
13 | transition-duration: 0.4s;
14 | }
15 |
16 | /* Animated button */
17 | .animated-button {
18 | background-color: #db3fa2;
19 | color: #000000;
20 | padding: 10px 20px;
21 | border: none;
22 | border-radius: 5px;
23 | cursor: pointer;
24 | transition-duration: 0.4s;
25 | font-family: "Arial Black", sans-serif;
26 | font-size: xx-large;
27 |
28 | }
29 |
30 | .animated-button:hover {
31 | background-color: #e37bbd;
32 | box-shadow: 0 18px 24px 0 rgba(202, 119, 202, 0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
33 | }
34 |
35 | /* Centering styles */
36 | body {
37 | display: flex;
38 | justify-content: center; /* Center horizontally */
39 | align-items: center; /* Center vertically */
40 | height: 100vh; /* Full viewport height */
41 | margin: 0;
42 | font-family: "Arial Black", sans-serif; /* Remove default margin */
43 | background-color: #000000; /* Optional background color */
44 | }
45 |
46 | h1 {
47 | position: absolute; /* Positioning the heading */
48 | top: 20px; /* Adjust top position */
49 | text-align: center; /* Center heading text */
50 | width: 100%; /* Full width */
51 | }
--------------------------------------------------------------------------------
/BUTTONS/Button26/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/BUTTONS/Button26/style.css:
--------------------------------------------------------------------------------
1 |
2 | .button {
3 | -webkit-appearance: none;
4 | appearance: none;
5 | position: relative;
6 | border-width: 0;
7 | padding: 0 8px 12px;
8 | min-width: 10em;
9 | box-sizing: border-box;
10 | background: transparent;
11 | font: inherit;
12 | cursor: pointer;
13 | }
14 |
15 | .button-top {
16 | display: flex;
17 | align-items: center;
18 | justify-content: center;
19 | position: relative;
20 | z-index: 0;
21 | padding: 8px 16px;
22 | transform: translateY(0);
23 | text-align: center;
24 | color: #fff;
25 | text-shadow: 0 -1px rgba(0, 0, 0, .25);
26 | transition-property: transform;
27 | transition-duration: .2s;
28 | -webkit-user-select: none;
29 | user-select: none;
30 | }
31 |
32 | .button:active .button-top {
33 | transform: translateY(6px);
34 | }
35 |
36 | .button-top::after {
37 | content: '';
38 | position: absolute;
39 | z-index: -1;
40 | border-radius: 4px;
41 | width: 100%;
42 | height: 100%;
43 | box-sizing: content-box;
44 | background-image: radial-gradient(#cd3f64, #9d3656);
45 | text-align: center;
46 | color: #fff;
47 | box-shadow: inset 0 0 0px 1px rgba(255, 255, 255, .2), 0 1px 2px 1px rgba(255, 255, 255, .2);
48 | transition-property: border-radius, padding, width, transform;
49 | transition-duration: .2s;
50 | }
51 |
52 | .button:active .button-top::after {
53 | border-radius: 6px;
54 | padding: 0 2px;
55 | }
56 |
57 | .button-bottom {
58 | position: absolute;
59 | z-index: -1;
60 | bottom: 4px;
61 | left: 4px;
62 | border-radius: 8px / 16px 16px 8px 8px;
63 | padding-top: 6px;
64 | width: calc(100% - 8px);
65 | height: calc(100% - 10px);
66 | box-sizing: content-box;
67 | background-color: #803;
68 | background-image: radial-gradient(4px 8px at 4px calc(100% - 8px), rgba(255, 255, 255, .25), transparent), radial-gradient(4px 8px at calc(100% - 4px) calc(100% - 8px), rgba(255, 255, 255, .25), transparent), radial-gradient(16px at -4px 0, white, transparent), radial-gradient(16px at calc(100% + 4px) 0, white, transparent);
69 | box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5), inset 0 -1px 3px 3px rgba(0, 0, 0, .4);
70 | transition-property: border-radius, padding-top;
71 | transition-duration: .2s;
72 | }
73 |
74 | .button:active .button-bottom {
75 | border-radius: 10px 10px 8px 8px / 8px;
76 | padding-top: 0;
77 | }
78 |
79 | .button-base {
80 | position: absolute;
81 | z-index: -2;
82 | top: 4px;
83 | left: 0;
84 | border-radius: 12px;
85 | width: 100%;
86 | height: calc(100% - 4px);
87 | background-color: rgba(0, 0, 0, .15);
88 | box-shadow: 0 1px 1px 0 rgba(255, 255, 255, .75), inset 0 2px 2px rgba(0, 0, 0, .25);
89 | }
--------------------------------------------------------------------------------
/BUTTONS/Button27/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/BUTTONS/Button27/style.css:
--------------------------------------------------------------------------------
1 |
2 | .btn {
3 | width: 6.5em;
4 | height: 2.3em;
5 | margin: 0.5em;
6 | background: black;
7 | color: white;
8 | border: none;
9 | border-radius: 0.625em;
10 | font-size: 20px;
11 | font-weight: bold;
12 | cursor: pointer;
13 | position: relative;
14 | z-index: 1;
15 | overflow: hidden;
16 | }
17 |
18 | button:hover {
19 | color: black;
20 | }
21 |
22 | button:after {
23 | content: "";
24 | background: white;
25 | position: absolute;
26 | z-index: -1;
27 | left: -20%;
28 | right: -20%;
29 | top: 0;
30 | bottom: 0;
31 | transform: skewX(-45deg) scale(0, 1);
32 | transition: all 0.5s;
33 | }
34 |
35 | button:hover:after {
36 | transform: skewX(-45deg) scale(1, 1);
37 | -webkit-transition: all 0.5s;
38 | transition: all 0.5s;
39 | }
--------------------------------------------------------------------------------
/BUTTONS/Button28/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Button28
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/BUTTONS/Button28/style.css:
--------------------------------------------------------------------------------
1 | .button1 {
2 | padding: 15px 30px;
3 | background: linear-gradient(45deg, #ff6f61, #ff8e53);
4 | border: none;
5 | border-radius: 8px;
6 | color: white;
7 | font-size: 18px;
8 | cursor: pointer;
9 | transition: background 0.3s ease;
10 | }
11 |
12 | .button1:hover {
13 | background: linear-gradient(45deg, #ff8e53, #ff6f61);
14 | }
15 |
--------------------------------------------------------------------------------
/BUTTONS/Button29/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Button29
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/BUTTONS/Button29/style.css:
--------------------------------------------------------------------------------
1 | .button2 {
2 | padding: 12px 25px;
3 | background-color: #4CAF50;
4 | border: none;
5 | color: white;
6 | font-size: 16px;
7 | border-radius: 6px;
8 | position: relative;
9 | box-shadow: 0 5px #2e7d32;
10 | cursor: pointer;
11 | transition: all 0.2s;
12 | }
13 |
14 | .button2:active {
15 | box-shadow: 0 2px #2e7d32;
16 | transform: translateY(3px);
17 | }
18 |
--------------------------------------------------------------------------------
/BUTTONS/Button30/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Button
8 |
9 |
10 |
11 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/BUTTONS/Button30/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: rgb(0, 5, 14);
3 | display: flex;
4 | justify-content: center;
5 | align-items: center;
6 | }
7 | .button {
8 | position: relative;
9 | width: 150px;
10 | height: 40px;
11 | cursor: pointer;
12 | display: flex;
13 | align-items: center;
14 | border: 1px solid #34974d;
15 | background-color: #3aa856;
16 | }
17 |
18 | .button, .button__icon, .button__text {
19 | transition: all 0.3s;
20 | }
21 |
22 | .button .button__text {
23 | transform: translateX(30px);
24 | color: #fff;
25 | font-weight: 600;
26 | }
27 |
28 | .button .button__icon {
29 | position: absolute;
30 | transform: translateX(109px);
31 | height: 100%;
32 | width: 39px;
33 | background-color: #34974d;
34 | display: flex;
35 | align-items: center;
36 | justify-content: center;
37 | }
38 |
39 | .button .svg {
40 | width: 30px;
41 | stroke: #fff;
42 | }
43 |
44 | .button:hover {
45 | background: #34974d;
46 | }
47 |
48 | .button:hover .button__text {
49 | color: transparent;
50 | }
51 |
52 | .button:hover .button__icon {
53 | width: 148px;
54 | transform: translateX(0);
55 | }
56 |
57 | .button:active .button__icon {
58 | background-color: #2e8644;
59 | }
60 |
61 | .button:active {
62 | border: 1px solid #2e8644;
63 | }
64 |
--------------------------------------------------------------------------------
/BUTTONS/Button31/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Click Here
9 |
10 |
11 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/BUTTONS/Button31/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | }
5 |
6 | body {
7 | background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
8 | url(https://images.pexels.com/photos/2166927/pexels-photo-2166927.jpeg?cs=srgb&dl=animal-aquarium-aquatic-2166927.jpg&fm=jpg)
9 | no-repeat center center/cover;
10 | font-family: Arial, Helvetica, sans-serif;
11 | }
12 |
13 | .container {
14 | display: flex;
15 | justify-content: center;
16 | align-items: center;
17 | height: 100vh;
18 | }
19 |
20 | a {
21 | font-size: 1.5rem;
22 | padding: 1rem 3rem;
23 | color: #f4f4f4;
24 | text-transform: uppercase;
25 | }
26 |
27 | .btn {
28 | text-decoration: none;
29 | border: 1px solid rgb(207, 103, 215);
30 | position: relative;
31 | overflow: hidden;
32 | }
33 |
34 | .btn:hover {
35 | box-shadow: 1px 1px 25px 10px rgba(226, 178, 236, 0.4);
36 | }
37 |
38 | .btn:before {
39 | content: "";
40 | position: absolute;
41 | top: 0;
42 | left: -100%;
43 | width: 100%;
44 | height: 100%;
45 | background: linear-gradient(
46 | 120deg,
47 | transparent,
48 | rgba(184, 140, 192, 0.4),
49 | transparent
50 | );
51 | transition: all 650ms;
52 | }
53 |
54 | .btn:hover:before {
55 | left: 100%;
56 | }
57 |
--------------------------------------------------------------------------------
/BUTTONS/Button32/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Button by Vedika Pathak
8 |
9 |
10 | Enter
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/BUTTONS/Button32/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | overflow: hidden;
3 | }
4 | #button {
5 | position: absolute;
6 | top: 0;
7 | left: 0;
8 | bottom: 0;
9 | right: 0;
10 | margin: auto;
11 | width: 10vmax;
12 | height: 10vmax;
13 | background: #222;
14 | z-index: 999;
15 | border-radius: 50%;
16 | overflow: hidden;
17 | box-shadow: 0 0 10vmax black;
18 | text-align: center;
19 | line-height: 10vmax;
20 | font-family: system-ui, BlinkMacSystemFont, sans-serif;
21 | font-size: 1.5vmax;
22 | letter-spacing: .125em;
23 | font-weight: bold;
24 | text-transform: uppercase;
25 | color: #fff;
26 | &:before {
27 | content:'.';
28 | letter-spacing: 0;
29 | visibility: hidden;
30 | }
31 | &:hover {
32 | background: #000;
33 | cursor: pointer;
34 | & ~ #front {
35 | transform: scale3d(1.5,1.5,1);
36 | }
37 | }
38 | }
39 | #front {
40 | position: absolute;
41 | z-index: 888;
42 | top: 0;
43 | left: 0;
44 | bottom: 0;
45 | right: 0;
46 | margin: auto;
47 | width: 100vmax;
48 | height: 100vmax;
49 | background: #000;
50 | border-radius: 50%;
51 | mix-blend-mode: color;
52 | transform: scale3d(0.1,0.1,1);
53 | transition: transform .5s ease-in-out;
54 | }
--------------------------------------------------------------------------------
/BUTTONS/Button33/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Button by Vedika
8 |
9 |
10 |
13 |
14 |
--------------------------------------------------------------------------------
/BUTTONS/Button33/style.css:
--------------------------------------------------------------------------------
1 | .container {
2 | font-family: sans-serif;
3 | display: flex;
4 | justify-content: center;
5 | align-items: center;
6 | align-content: center;
7 | flex-wrap: wrap;
8 | margin: 0 auto 10px;
9 | padding: .5em;
10 | line-height: normal;
11 | }
12 | .container .button {
13 | color: #fff;
14 | margin: 20px;
15 | padding: 12px 15px;
16 | text-align: center;
17 | text-transform: uppercase;
18 | position: relative;
19 | transition: .3s;
20 | z-index: 1;
21 | background: #9f5ba8;
22 | cursor: pointer;
23 | border-radius: 6px;
24 | }
25 | .container .button:before {
26 | pointer-events: none;
27 | position: absolute;
28 | z-index: -1;
29 | content: "";
30 | top: 100%;
31 | left: 5%;
32 | height: 10px;
33 | width: 90%;
34 | opacity: 0;
35 | background: radial-gradient(ellipse at center, #531561 0%, rgba(81, 25, 95, 0) 80%);
36 | transition-duration: 0.3s;
37 | transition-property: transform opacity;
38 | }
39 | .container .button:hover{
40 | background: #390b42;
41 | transform: translateY(-5px);
42 | }
43 | .container .button:hover:before{
44 | opacity: 1;
45 | transform: translateY(5px);
46 | }
47 | @keyframes glowing {
48 | 0% { background-position: 0 0; }
49 | 50% { background-position: 400% 0; }
50 | 100% { background-position: 0 0; }
51 | }
--------------------------------------------------------------------------------
/BUTTONS/Button34/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Button by Vedika
8 |
9 |
10 |
13 |
14 |
--------------------------------------------------------------------------------
/BUTTONS/Button34/style.css:
--------------------------------------------------------------------------------
1 | button {
2 | position: absolute;
3 | top: 50%;
4 | right: 0;
5 | left: 0;
6 | display: block;
7 | width: 240px;
8 | padding: 40px;
9 | margin: 0 auto;
10 | border: 0;
11 | cursor: pointer;
12 | border-radius: 2px;
13 | transform: translateY(-50%);
14 | box-shadow: 0 10px 20px -5px #3b5f7d;
15 | overflow: hidden;
16 | }
17 |
18 | button:before,
19 | button:after {
20 | content: "";
21 | position: absolute;
22 | top: 0;
23 | right: 0;
24 | bottom: 0;
25 | left: 0;
26 | }
27 | button:after {
28 | background-color: #000;
29 | opacity: 0.16;
30 | z-index: 2;
31 | }
32 | button div {
33 | position: absolute;
34 | top: 0;
35 | right: 0;
36 | bottom: 0;
37 | left: 0;
38 | z-index: 3;
39 | }
40 | button div:before,
41 | button div:after {
42 | position: absolute;
43 | top: 0;
44 | right: 0;
45 | left: 0;
46 | color: #0d0404;
47 | font-size: 30px;
48 | font-family: Verdana, Geneva, Tahoma, sans-serif;
49 | font-weight: bold;
50 | line-height: 1;
51 | text-align: center;
52 | padding: 25px 0;
53 | transition: 0.3s ease all;
54 | }
55 | button div:before {
56 | content: "Submit";
57 | letter-spacing: 0;
58 | opacity: 1;
59 | transform: scale(1);
60 | }
61 | button div:after {
62 | content: "Done!";
63 | letter-spacing: -10px;
64 | transform: scale(0);
65 | opacity: 0;
66 | }
67 | button:hover:before {
68 | transform: scale(1.3);
69 | }
70 | button:hover div:before {
71 | letter-spacing: 3px;
72 | opacity: 0;
73 | transform: scale(4);
74 | }
75 | button:hover div:after {
76 | letter-spacing: 0;
77 | opacity: 1;
78 | transform: scale(1);
79 | }
--------------------------------------------------------------------------------
/BUTTONS/Button35/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Animated Button with Vibrant Colors
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/BUTTONS/Button35/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: 'Arial', sans-serif;
3 | display: flex;
4 | justify-content: center;
5 | align-items: center;
6 | height: 100vh;
7 | margin: 0;
8 | background: linear-gradient(135deg, #12c2e9, #c471ed, #f7797d);
9 | background-size: 300% 300%;
10 | animation: backgroundSlide 10s ease infinite;
11 | }
12 |
13 | /* Background gradient animation */
14 | @keyframes backgroundSlide {
15 | 0% { background-position: 0% 50%; }
16 | 50% { background-position: 100% 50%; }
17 | 100% { background-position: 0% 50%; }
18 | }
19 |
20 | .custom-btn {
21 | position: relative;
22 | display: inline-block;
23 | padding: 20px 50px;
24 | font-size: 20px;
25 | font-weight: bold;
26 | color: white;
27 | background: linear-gradient(45deg, #ff512f, #dd2476);
28 | border: 3px solid rgba(255, 255, 255, 0.3);
29 | border-radius: 50px;
30 | cursor: pointer;
31 | transition: all 0.4s ease;
32 | overflow: hidden;
33 | z-index: 1;
34 | box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
35 | }
36 |
37 | /* Glowing border and hover effects */
38 | .custom-btn:hover {
39 | border: 3px solid rgba(255, 255, 255, 0.8);
40 | box-shadow: 0px 15px 30px rgba(221, 36, 118, 0.5), 0px 0px 20px rgba(221, 36, 118, 0.8);
41 | background: linear-gradient(45deg, #ff416c, #ff4b2b);
42 | transform: scale(1.1) rotate(3deg);
43 | }
44 |
45 | /* Ripple effect animation */
46 | .custom-btn::before {
47 | content: '';
48 | position: absolute;
49 | top: 50%;
50 | left: 50%;
51 | width: 300%;
52 | height: 300%;
53 | background: rgba(255, 255, 255, 0.1);
54 | transform: translate(-50%, -50%) rotate(45deg);
55 | transition: width 0.5s ease, height 0.5s ease;
56 | z-index: 0;
57 | border-radius: 50%;
58 | }
59 |
60 | .custom-btn:hover::before {
61 | width: 0%;
62 | height: 0%;
63 | }
64 |
65 | /* Text glow and color shift */
66 | .custom-btn span {
67 | position: relative;
68 | z-index: 1;
69 | color: #fff;
70 | transition: color 0.4s ease;
71 | }
72 |
73 | .custom-btn:hover span {
74 | color: #f7f7f7;
75 | text-shadow: 0px 0px 15px rgba(255, 255, 255, 0.7);
76 | }
77 |
78 | /* Floating animation on hover */
79 | .custom-btn:hover {
80 | animation: floating 1.5s ease-in-out infinite;
81 | }
82 |
83 | /* Floating keyframe animation */
84 | @keyframes floating {
85 | 0% { transform: scale(1.1) translateY(0px); }
86 | 50% { transform: scale(1.1) translateY(-10px); }
87 | 100% { transform: scale(1.1) translateY(0px); }
88 | }
89 |
--------------------------------------------------------------------------------
/BUTTONS/Button36/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Stylish Button
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/BUTTONS/Button36/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | height: 100vh;
12 | background-color: #f2f2f2;
13 | font-family: Arial, sans-serif;
14 | }
15 |
16 | .button-container {
17 | text-align: center;
18 | }
19 |
20 | .pop-button {
21 | padding: 15px 30px;
22 | font-size: 18px;
23 | font-weight: bold;
24 | color: white;
25 | background-color: #e91e63; /* Pink color */
26 | border: none;
27 | border-radius: 50px;
28 | box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
29 | cursor: pointer;
30 | transition: all 0.3s ease;
31 | position: relative;
32 | }
33 |
34 | .pop-button:hover {
35 | background-color: #ff5722; /* Orange color */
36 | box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
37 | transform: translateY(-5px);
38 | }
39 |
40 | .pop-button:active {
41 | background-color: #9c27b0; /* Purple color */
42 | transform: translateY(0px);
43 | box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
44 | }
45 |
--------------------------------------------------------------------------------
/BUTTONS/Button37/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Animated Button
7 |
8 |
9 |
10 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/BUTTONS/Button37/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | height: 100vh;
4 | display: flex;
5 | justify-content: center;
6 | align-items: center;
7 | background-color: #f5f5f5;
8 | font-family: 'Arial', sans-serif;
9 | }
10 |
11 | .animated-btn {
12 | position: relative;
13 | padding: 15px 30px;
14 | background-color: #6200ea;
15 | color: #fff;
16 | font-size: 18px;
17 | text-decoration: none;
18 | border: none;
19 | border-radius: 50px;
20 | overflow: hidden;
21 | transition: all 0.3s ease;
22 | box-shadow: 0 4px 15px rgba(98, 0, 234, 0.4);
23 | }
24 |
25 | .animated-btn::before {
26 | content: '';
27 | position: absolute;
28 | top: 50%;
29 | left: 50%;
30 | width: 300%;
31 | height: 300%;
32 | background-color: rgba(255, 255, 255, 0.15);
33 | transform: translate(-50%, -50%) rotate(45deg);
34 | transition: all 0.5s ease;
35 | border-radius: 50%;
36 | opacity: 0;
37 | }
38 |
39 | .animated-btn:hover {
40 | background-color: #3700b3;
41 | box-shadow: 0 6px 20px rgba(55, 0, 179, 0.5);
42 | transform: scale(1.05);
43 | }
44 |
45 | .animated-btn:hover::before {
46 | opacity: 1;
47 | width: 150%;
48 | height: 150%;
49 | }
50 |
51 | .animated-btn::after {
52 | content: '';
53 | position: absolute;
54 | top: 0;
55 | left: 0;
56 | width: 100%;
57 | height: 100%;
58 | background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
59 | opacity: 0;
60 | transition: all 0.3s ease;
61 | }
62 |
63 | .animated-btn:hover::after {
64 | opacity: 1;
65 | animation: shine 0.7s ease forwards;
66 | }
67 |
68 | @keyframes shine {
69 | 0% {
70 | transform: translateX(-100%);
71 | }
72 | 100% {
73 | transform: translateX(100%);
74 | }
75 | }
76 |
77 |
--------------------------------------------------------------------------------
/BUTTONS/Button38/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | BUTTON 38
8 |
9 |
10 | Click Here !
11 |
12 |
13 |
--------------------------------------------------------------------------------
/BUTTONS/Button38/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | background-color: rgb(19, 17, 17);
3 | }
4 | .btn {
5 | display: inline-block;
6 | padding: 0.9rem 1.8rem;
7 | font-size: 16px;
8 | font-weight: 700;
9 | color: white;
10 | border: 3px solid rgb(252, 70, 100);
11 | cursor: pointer;
12 | position: relative;
13 | background-color: transparent;
14 | text-decoration: none;
15 | overflow: hidden;
16 | z-index: 1;
17 | font-family: inherit;
18 | }
19 |
20 | .btn::before {
21 | content: "";
22 | position: absolute;
23 | left: 0;
24 | top: 0;
25 | width: 100%;
26 | height: 100%;
27 | background-color: rgb(252, 70, 100);
28 | transform: translateX(-100%);
29 | transition: all .3s;
30 | z-index: -1;
31 | }
32 |
33 | .btn:hover::before {
34 | transform: translateX(0);
35 | }
36 |
--------------------------------------------------------------------------------
/BUTTONS/Button39/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/BUTTONS/Button39/style.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | margin: 0;
4 | padding: 0;
5 | width: 100%;
6 | height: 100vh;
7 | display: flex;
8 | flex-direction: row;
9 | justify-content: center;
10 | align-items: center;
11 | background: #000;
12 | }
13 |
14 | .glow-on-hover {
15 | width: 220px;
16 | height: 50px;
17 | border: none;
18 | outline: none;
19 | color: #fff;
20 | background: #111;
21 | cursor: pointer;
22 | position: relative;
23 | z-index: 0;
24 | border-radius: 10px;
25 | }
26 |
27 | .glow-on-hover:before {
28 | content: '';
29 | background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
30 | position: absolute;
31 | top: -2px;
32 | left:-2px;
33 | background-size: 400%;
34 | z-index: -1;
35 | filter: blur(5px);
36 | width: calc(100% + 4px);
37 | height: calc(100% + 4px);
38 | animation: glowing 20s linear infinite;
39 | opacity: 0;
40 | transition: opacity .3s ease-in-out;
41 | border-radius: 10px;
42 | }
43 |
44 | .glow-on-hover:active {
45 | color: #000
46 | }
47 |
48 | .glow-on-hover:active:after {
49 | background: transparent;
50 | }
51 |
52 | .glow-on-hover:hover:before {
53 | opacity: 1;
54 | }
55 |
56 | .glow-on-hover:after {
57 | z-index: -1;
58 | content: '';
59 | position: absolute;
60 | width: 100%;
61 | height: 100%;
62 | background: #111;
63 | left: 0;
64 | top: 0;
65 | border-radius: 10px;
66 | }
67 |
68 | @keyframes glowing {
69 | 0% { background-position: 0 0; }
70 | 50% { background-position: 400% 0; }
71 | 100% { background-position: 0 0; }
72 | }
73 |
--------------------------------------------------------------------------------
/BUTTONS/Button40/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 3D Colorful Pop-Up Button
7 |
8 |
9 |
10 |
11 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/BUTTONS/Button40/style1.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body, html {
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | height: 100vh;
12 | background-color: #0e0e0e;
13 | font-family: Arial, sans-serif;
14 | }
15 |
16 | .colorful-button {
17 | padding: 20px 60px;
18 | font-size: 22px;
19 | color: #ffffff;
20 | background: linear-gradient(45deg, #ff0066, #ffcc00, #33ccff);
21 | background-size: 200% 200%;
22 | border: none;
23 | border-radius: 12px;
24 | box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
25 | cursor: pointer;
26 | transition: background-position 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
27 | font-weight: bold;
28 | text-transform: uppercase;
29 | outline: none;
30 | }
31 |
32 | .colorful-button:hover {
33 | background-position: right;
34 | transform: translateY(-6px) scale(1.05);
35 | box-shadow: 0px 10px 20px rgba(255, 102, 204, 0.5), 0px -4px 8px rgba(255, 204, 0, 0.4);
36 | }
37 |
38 | .colorful-button:active {
39 | transform: scale(1);
40 | box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.4);
41 | }
42 |
--------------------------------------------------------------------------------
/BUTTONS/Button41/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Pop button
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/BUTTONS/Button41/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | height: 100vh;
6 | background: #000000;
7 | }
8 |
9 | .slide-btn {
10 | background: #1eade2;
11 | color: white;
12 | padding: 23px 44px;
13 | border: 4px solid rgb(235, 230, 227);
14 | border-radius: 50px;
15 | cursor: pointer;
16 | font-size: 30px;
17 | position: relative;
18 | transition: color 0.3s ease, border-radius 0.3s ease;
19 | }
20 |
21 | .slide-btn:before, .slide-btn:after {
22 | content: "";
23 | position: absolute;
24 | width: 0;
25 | height: 4px;
26 | background: rgb(241, 237, 235);
27 | transition: 0.3s ease;
28 | }
29 |
30 | .slide-btn:before {
31 | left: 50%;
32 | top: 0;
33 | transform: translateX(-50%);
34 | }
35 |
36 | .slide-btn:after {
37 | right: 50%;
38 | bottom: 0;
39 | transform: translateX(50%);
40 | }
41 |
42 | .slide-btn:hover:before, .slide-btn:hover:after {
43 | width: 100%;
44 | }
45 |
46 | .slide-btn:hover {
47 | border-radius: 0;
48 | }
49 |
--------------------------------------------------------------------------------
/BUTTONS/Button42/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 |
10 |
11 |
12 | HOVER ME
13 |
14 |
18 |
19 | HOVER ME
20 |
21 |
14 |
24 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/BUTTONS/Button51/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Button 45 by Abhishek Pihulkar
8 |
9 |
10 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/BUTTONS/Button51/style.css:
--------------------------------------------------------------------------------
1 |
2 | .button-45 {
3 | touch-action: manipulation;
4 | display: inline-block;
5 | outline: none;
6 | font-family: inherit;
7 | font-size: 1em;
8 | box-sizing: border-box;
9 | border: none;
10 | border-radius: .3em;
11 | height: 2.75em;
12 | line-height: 2.5em;
13 | text-transform: uppercase;
14 | padding: 0 1em;
15 | box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),
16 | inset 0 -2px 5px 1px rgba(139,66,8,1),
17 | inset 0 -1px 1px 3px rgba(250,227,133,1);
18 | background-image: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
19 | border: 1px solid #a55d07;
20 | color: rgb(120,50,5);
21 | text-shadow: 0 2px 2px rgba(250, 227, 133, 1);
22 | cursor: pointer;
23 | transition: all .2s ease-in-out;
24 | background-size: 100% 100%;
25 | background-position:center;
26 | }
27 | .button-18:focus,
28 | .button-18:hover {
29 | background-size: 150% 150%;
30 | box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23),
31 | inset 0 -2px 5px 1px #b17d10,
32 | inset 0 -1px 1px 3px rgba(250,227,133,1);
33 | border: 1px solid rgba(165,93,7,.6);
34 | color: rgba(120,50,5,.8);
35 | }
36 | .button-18:active {
37 | box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),
38 | inset 0 -2px 5px 1px #b17d10,
39 | inset 0 -1px 1px 3px rgba(250,227,133,1);
40 | }
41 |
--------------------------------------------------------------------------------
/BUTTONS/Button52/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Button58
8 |
9 |
10 |
11 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/BUTTONS/Button52/style.css:
--------------------------------------------------------------------------------
1 | .btn {
2 | --btn-gradient: var(--btn-gradient-from),var(--btn-gradient-to);
3 | border: 0 none;
4 | appearance: none;
5 | border-radius: 9999px;
6 | background-color: var(--btn-bg);
7 | box-shadow: 0 0 2px 2px var(--btn-shadow), 0 0 4px 4px var(--btn-shadow), 0 0 8px 8px var(--btn-shadow);
8 | }
9 |
10 | .btn,
11 | .btn * {
12 | box-sizing: border-box;
13 | }
14 |
15 | .btn-inner {
16 | position: relative;
17 | border-radius: inherit;
18 | border: 1px solid transparent;
19 | font-size: 1rem;
20 | display: flex;
21 | align-items: center;
22 | min-width: 10rem;
23 | padding: 1.5rem 2rem;
24 | overflow: hidden;
25 | color: var(--btn-text-color);
26 | }
27 |
28 | .btn-label {
29 | position: absolute;
30 | bottom: 1px;
31 | left: 1px;
32 | right: 1px;
33 | top: 1px;
34 | border-radius: inherit;
35 | z-index: 10;
36 | display: flex;
37 | justify-content: center;
38 | align-items: center;
39 | background-color: var(--btn-bg);
40 | background-image: linear-gradient(to bottom,var(--btn-gradient));
41 | }
42 |
43 | .btn-blur {
44 | position: absolute;
45 | bottom: 1px;
46 | left: 1px;
47 | right: 1px;
48 | top: 1px;
49 | z-index: 0;
50 | transform: scaleX(3.5);
51 | filter: blur(6px);
52 | }
53 |
54 | .btn-blur:before {
55 | --gradient: var(--btn-color-from), var(--btn-color), var(--btn-color-to);
56 | --transition: 5s;
57 | content: "";
58 | position: absolute;
59 | z-index: 0;
60 | top: 50%;
61 | bottom: 0;
62 | left: 0;
63 | right: 0;
64 | background-image: conic-gradient(var(--gradient));
65 | animation: turn var(--transition) linear infinite;
66 | }
67 |
68 | .btn:hover,
69 | .btn:active {
70 | transition: transform .5s ease-in-out 0s;
71 | transform: translateY(-1px);
72 | }
73 |
74 | .btn:active .btn-blur:before {
75 | --transition: 2s;
76 | }
77 |
78 | .btn--primary {
79 | --btn-bg: #111111;
80 | --btn-gradient-from: #111111;
81 | --btn-gradient-to: rgba(255, 255, 255, 0.1);
82 | --btn-text-color: #ffffff;
83 | --btn-color: #5f17d4;
84 | --btn-color-from: #c6a3ff;
85 | --btn-color-to: #966ed8;
86 | --btn-shadow: #5f17d42d;
87 | }
88 |
89 | @keyframes turn {
90 | 0% {
91 | transform: translateY(-50%) rotate(0deg)
92 | }
93 |
94 | to {
95 | transform: translateY(-50%) rotate(1turn)
96 | }
97 | }
98 |
--------------------------------------------------------------------------------
/BUTTONS/Button53/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Creative Button
7 |
8 |
9 |
10 |
11 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/BUTTONS/Button53/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | height: 100vh;
6 | margin: 0;
7 | background-color: #f0f0f0;
8 | font-family: 'Arial', sans-serif;
9 | }
10 |
11 | .button-container {
12 | display: flex;
13 | justify-content: center;
14 | align-items: center;
15 | }
16 |
17 | .creative-button {
18 | background: linear-gradient(135deg, #6e8efb, #a777e3);
19 | border: none;
20 | color: white;
21 | padding: 15px 30px;
22 | text-align: center;
23 | text-decoration: none;
24 | display: inline-block;
25 | font-size: 18px;
26 | font-weight: bold;
27 | border-radius: 50px;
28 | transition: all 0.3s ease;
29 | box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
30 | position: relative;
31 | overflow: hidden;
32 | }
33 |
34 | .creative-button:hover {
35 | box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
36 | transform: translateY(-5px);
37 | }
38 |
39 | .creative-button:before {
40 | content: "";
41 | position: absolute;
42 | top: 50%;
43 | left: 50%;
44 | width: 300%;
45 | height: 300%;
46 | background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 10%, transparent 10.01%);
47 | background-size: 10px 10px;
48 | transform: translate(-50%, -50%) scale(0);
49 | transition: transform 0.5s ease;
50 | }
51 |
52 | .creative-button:hover:before {
53 | transform: translate(-50%, -50%) scale(1);
54 | }
55 |
56 | .creative-button:active {
57 | background: linear-gradient(135deg, #a777e3, #6e8efb);
58 | transform: translateY(2px);
59 | }
60 |
--------------------------------------------------------------------------------
/BUTTONS/Button54/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Stylish Button
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/BUTTONS/Button54/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | height: 100vh;
6 | background-color: #f4f4f4;
7 | margin: 0;
8 | }
9 |
10 | .stylish-button {
11 | background: linear-gradient(45deg, #ff6b6b, #f94d6e);
12 | color: white;
13 | padding: 15px 30px;
14 | border: none;
15 | border-radius: 50px;
16 | box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
17 | font-size: 18px;
18 | cursor: pointer;
19 | transition: all 0.3s ease;
20 | }
21 |
22 | .stylish-button:hover {
23 | background: linear-gradient(45deg, #f94d6e, #ff6b6b);
24 | transform: scale(1.05);
25 | box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
26 | }
27 |
28 | .stylish-button:active {
29 | transform: scale(0.98);
30 | box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
31 | }
32 |
--------------------------------------------------------------------------------
/BUTTONS/Button55/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Custom Button
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/BUTTONS/Button55/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | height: 100vh;
6 | background-color: #f0f0f0;
7 | margin: 0;
8 | font-family: Arial, sans-serif;
9 | }
10 |
11 | .custom-button {
12 | background-color: #6c63ff; /* Unique purple color */
13 | color: white;
14 | padding: 15px 30px;
15 | border: none;
16 | border-radius: 50px; /* Rounded shape */
17 | font-size: 18px;
18 | cursor: pointer;
19 | box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
20 | transition: background-color 0.3s ease, box-shadow 0.3s ease;
21 | }
22 |
23 | .custom-button:hover {
24 | background-color: #524bb8; /* Darker shade on hover */
25 | box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
26 | }
27 |
28 | .custom-button:active {
29 | background-color: #3d3790; /* Even darker when clicked */
30 | }
31 |
--------------------------------------------------------------------------------
/BUTTONS/Button56/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Pop button
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/BUTTONS/Button56/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | height: 100vh;
6 | background: #000000;
7 | }
8 |
9 | .slide-btn {
10 | background: #832c00;
11 | color: white;
12 | padding: 23px 44px;
13 | border: 4px solid rgb(235, 230, 227);
14 | border-radius: 50px;
15 | cursor: pointer;
16 | font-size: 30px;
17 | position: relative;
18 | transition: color 0.3s ease, border-radius 0.3s ease;
19 | }
20 |
21 | .slide-btn:before, .slide-btn:after {
22 | content: "";
23 | position: absolute;
24 | width: 0;
25 | height: 4px;
26 | background: rgb(208, 145, 114);
27 | transition: 0.3s ease;
28 | }
29 |
30 | .slide-btn:before {
31 | left: 50%;
32 | top: 0;
33 | transform: translateX(-50%);
34 | }
35 |
36 | .slide-btn:after {
37 | right: 50%;
38 | bottom: 0;
39 | transform: translateX(50%);
40 | }
41 |
42 | .slide-btn:hover:before, .slide-btn:hover:after {
43 | width: 100%;
44 | }
45 |
46 | .slide-btn:hover {
47 | border-radius: 0;
48 | }
49 |
--------------------------------------------------------------------------------
/BUTTONS/Button57/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 3D Button with Hover Effect
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/BUTTONS/Button57/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | height: 100vh;
12 | background-color: #f0f0f0;
13 | }
14 |
15 | .button-container {
16 | perspective: 1000px; /* Adds a sense of depth */
17 | }
18 |
19 | .three-d-button {
20 | background-color: #4CAF50;
21 | color: white;
22 | font-size: 20px;
23 | padding: 15px 30px;
24 | border: none;
25 | cursor: pointer;
26 | border-radius: 5px;
27 | font-weight: bold;
28 | box-shadow: 0px 6px 0px #388E3C; /* Creates the 3D effect */
29 | transition: transform 0.1s ease, box-shadow 0.1s
30 |
--------------------------------------------------------------------------------
/BUTTONS/Button58/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Futuristic Button
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/BUTTONS/Button58/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | height: 100vh;
6 | background-color: #1a1a1a; /* Dark background */
7 | margin: 0;
8 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
9 | }
10 |
11 | .futuristic-button {
12 | background: linear-gradient(135deg, #00c6ff, #0072ff); /* Gradient blue color */
13 | color: white;
14 | padding: 20px 40px;
15 | border: 3px solid #00c6ff; /* Bright border */
16 | border-radius: 0px; /* Sharp edges */
17 | font-size: 20px;
18 | cursor: pointer;
19 | text-transform: uppercase;
20 | letter-spacing: 2px;
21 | position: relative;
22 | overflow: hidden;
23 | transition: all 0.3s ease;
24 | }
25 |
26 | .futuristic-button::before {
27 | content: "";
28 | position: absolute;
29 | top: 0;
30 | left: -100%;
31 | width: 100%;
32 | height: 100%;
33 | background: rgba(255, 255, 255, 0.2);
34 | transform: skewX(-30deg);
35 | transition: left 0.5s ease;
36 | }
37 |
38 | .futuristic-button:hover::before {
39 | left: 100%; /* Slide animation effect */
40 | }
41 |
42 | .futuristic-button:hover {
43 | background: linear-gradient(135deg, #00ff6c, #00c6ff); /* Color change on hover */
44 | border-color: #00ff6c;
45 | }
46 |
--------------------------------------------------------------------------------
/BUTTONS/Button59/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Button 1
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/BUTTONS/Button59/style.css:
--------------------------------------------------------------------------------
1 | .container {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | min-height: 100vh;
6 | background-color: #f5f5f5;
7 | }
8 |
9 | .button-1 {
10 | padding: 15px 30px;
11 | background-color: #4CAF50;
12 | color: white;
13 | border: none;
14 | border-radius: 25px;
15 | font-size: 16px;
16 | cursor: pointer;
17 | transition: all 0.3s ease;
18 | box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
19 | }
20 |
21 | .button-1:hover {
22 | transform: translateY(-3px);
23 | box-shadow: 0 8px 20px rgba(76, 175, 80, 0.4);
24 | background-color: #45a049;
25 | }
26 |
27 | .button-1:active {
28 | transform: translateY(1px);
29 | }
--------------------------------------------------------------------------------
/BUTTONS/Button60/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Stylish Animated Button
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/BUTTONS/Button60/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | min-height: 100vh;
6 | margin: 0;
7 | background-color: #e0e7ff;
8 | font-family: Arial, sans-serif;
9 | }
10 |
11 | .button-container {
12 | text-align: center;
13 | }
14 |
15 |
16 | .animated-btn {
17 | padding: 15px 40px;
18 | font-size: 20px;
19 | font-weight: bold;
20 | color: #fff;
21 | background-color: #1a73e8;
22 | border: none;
23 | border-radius: 10px;
24 | cursor: pointer;
25 | position: relative;
26 | overflow: hidden;
27 | transition: background-color 0.4s ease, color 0.4s ease, transform 0.2s ease;
28 | }
29 |
30 |
31 | .animated-btn:hover {
32 | background-color: #4a90e2;
33 | color: #f0f4ff;
34 | transform: scale(1.1);
35 | }
36 |
37 |
38 | .animated-btn:active {
39 | transform: scale(0.95);
40 | background-color: #2f5fb3;
41 | }
42 |
43 |
44 | .animated-btn::before {
45 | content: '';
46 | position: absolute;
47 | top: 50%;
48 | left: 50%;
49 | width: 300%;
50 | height: 300%;
51 | background-color: rgba(255, 255, 255, 0.3);
52 | border-radius: 50%;
53 | transform: translate(-50%, -50%) scale(0);
54 | transition: transform 0.5s ease;
55 | pointer-events: none;
56 | }
57 |
58 |
59 | .animated-btn:active::before {
60 | transform: translate(-50%, -50%) scale(1);
61 | transition: transform 0s;
62 | }
63 |
--------------------------------------------------------------------------------
/BUTTONS/Button61/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Crazy Button
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/BUTTONS/Button61/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | min-height: 100vh;
6 | margin: 0;
7 | background-color: #0e0e0e;
8 | font-family: Arial, sans-serif;
9 | }
10 |
11 | .button-container {
12 | text-align: center;
13 | }
14 |
15 |
16 | .crazy-btn {
17 | padding: 20px 60px;
18 | font-size: 22px;
19 | font-weight: bold;
20 | color: #fff;
21 | background: linear-gradient(45deg, #ff416c, #ff4b2b);
22 | border: none;
23 | border-radius: 15px;
24 | position: relative;
25 | cursor: pointer;
26 | overflow: hidden;
27 | transition: transform 0.3s ease;
28 | box-shadow: 0px 0px 15px rgba(255, 75, 43, 0.6), 0px 0px 25px rgba(255, 65, 108, 0.8);
29 | }
30 |
31 |
32 | .crazy-btn::before {
33 | content: '';
34 | position: absolute;
35 | top: -50%;
36 | left: -50%;
37 | width: 200%;
38 | height: 200%;
39 | background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 70%);
40 | opacity: 0.6;
41 | transform: rotate(0deg);
42 | transition: transform 1.5s ease-in-out;
43 | pointer-events: none;
44 | border-radius: 50%;
45 | z-index: -1;
46 | animation: rotateGlow 6s linear infinite;
47 | }
48 |
49 |
50 | .crazy-btn:hover {
51 | transform: scale(1.1) rotate(2deg);
52 | background: linear-gradient(45deg, #42e695, #3bb2b8);
53 | box-shadow: 0px 0px 20px rgba(66, 230, 149, 0.6), 0px 0px 30px rgba(59, 178, 184, 0.8);
54 | }
55 |
56 |
57 | .crazy-btn:active {
58 | transform: scale(0.95) rotate(-2deg);
59 | background: linear-gradient(45deg, #e65e42, #b23b59);
60 | box-shadow: 0px 0px 10px rgba(230, 94, 66, 0.6), 0px 0px 20px rgba(178, 59, 89, 0.8);
61 | }
62 |
63 |
64 | @keyframes rotateGlow {
65 | 0% { transform: rotate(0deg); }
66 | 100% { transform: rotate(360deg); }
67 | }
68 |
--------------------------------------------------------------------------------
/BUTTONS/Button62/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Button 2
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/BUTTONS/Button62/style.css:
--------------------------------------------------------------------------------
1 | .container {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | min-height: 100vh;
6 | background-color: #f5f5f5;
7 | }
8 |
9 | .button-2 {
10 | padding: 15px 30px;
11 | background: linear-gradient(45deg, #FF6B6B, #FF8E53);
12 | color: white;
13 | border: none;
14 | border-radius: 5px;
15 | font-size: 16px;
16 | cursor: pointer;
17 | transition: all 0.3s ease;
18 | position: relative;
19 | overflow: hidden;
20 | }
21 |
22 | .button-2:before {
23 | content: '';
24 | position: absolute;
25 | top: 0;
26 | left: -100%;
27 | width: 100%;
28 | height: 100%;
29 | background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
30 | transition: 0.5s;
31 | }
32 |
33 | .button-2:hover:before {
34 | left: 100%;
35 | }
36 |
37 | .button-2:hover {
38 | transform: scale(1.05);
39 | }
40 |
--------------------------------------------------------------------------------
/BUTTONS/Button63/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Border Animation Button
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/BUTTONS/Button63/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | min-height: 100vh;
6 | background: #f0f0f0;
7 | margin: 0;
8 | font-family: Arial, sans-serif;
9 | }
10 |
11 | .button-container {
12 | display: flex;
13 | flex-wrap: wrap;
14 | gap: 20px;
15 | justify-content: center;
16 | padding: 20px;
17 | }
18 |
19 | /* Border Animation Button */
20 | .border-anim-btn {
21 | padding: 15px 30px;
22 | background: transparent;
23 | color: #333;
24 | font-size: 16px;
25 | cursor: pointer;
26 | position: relative;
27 | border: none;
28 | }
29 |
30 | .border-anim-btn::before {
31 | content: '';
32 | position: absolute;
33 | top: 0;
34 | left: 0;
35 | width: 100%;
36 | height: 100%;
37 | border: 2px solid #333;
38 | transition: 0.5s;
39 | }
40 |
41 | .border-anim-btn:hover::before {
42 | transform: scale(1.1);
43 | opacity: 0;
44 | }
--------------------------------------------------------------------------------
/BUTTONS/Button64/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Shine Effect Button
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/BUTTONS/Button64/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | min-height: 100vh;
6 | margin: 0;
7 | background: #f0f0f0;
8 | font-family: Arial, sans-serif;
9 | }
10 |
11 | .shine-btn {
12 | padding: 20px 40px;
13 | background: linear-gradient(135deg, #6e8efb, #a777e3);
14 | color: white;
15 | border: none;
16 | border-radius: 5px;
17 | font-size: 18px;
18 | cursor: pointer;
19 | position: relative;
20 | overflow: hidden;
21 | transition: transform 0.3s;
22 | box-shadow: 0 5px 15px rgba(0,0,0,0.2);
23 | }
24 |
25 | .shine-btn::before {
26 | content: '';
27 | position: absolute;
28 | top: -50%;
29 | left: -50%;
30 | width: 200%;
31 | height: 200%;
32 | background: linear-gradient(
33 | 45deg,
34 | transparent,
35 | rgba(255,255,255,0.3),
36 | transparent
37 | );
38 | transform: rotate(45deg);
39 | transition: 0.5s;
40 | }
41 |
42 | .shine-btn:hover {
43 | transform: translateY(-3px);
44 | box-shadow: 0 8px 20px rgba(0,0,0,0.3);
45 | }
46 |
47 | .shine-btn:hover::before {
48 | animation: shine 0.75s;
49 | }
50 |
51 | @keyframes shine {
52 | 0% {
53 | transform: rotate(45deg) translateX(-200%);
54 | }
55 | 100% {
56 | transform: rotate(45deg) translateX(200%);
57 | }
58 | }
59 |
60 | @media (max-width: 480px) {
61 | .shine-btn {
62 | padding: 15px 30px;
63 | font-size: 16px;
64 | }
65 | }
--------------------------------------------------------------------------------
/BUTTONS/Button65/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Bounce button
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/BUTTONS/Button65/style.css:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | .bounce-button {
5 | background-color: #f44336;
6 | color: white;
7 | border: none;
8 | padding: 15px 30px;
9 | font-size: 16px;
10 | cursor: pointer;
11 | transition: transform 0.3s;
12 | }
13 |
14 | .bounce-button:hover {
15 | transform: translateY(-10px);
16 | animation: bounce 0.5s forwards;
17 | }
18 |
19 | @keyframes bounce {
20 | 0%, 20%, 50%, 80%, 100% {
21 | transform: translateY(0);
22 | }
23 | 40% {
24 | transform: translateY(-15px);
25 | }
26 | 60% {
27 | transform: translateY(-7px);
28 | }
29 | }
30 |
31 |
--------------------------------------------------------------------------------
/BUTTONS/Button66/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Circle Button
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/BUTTONS/Button66/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | height: 100vh;
6 | background: #000000;
7 | }
8 | .circle-button {
9 | width: 50px;
10 | height: 50px;
11 | color: white;
12 | background-color: #ff5722;
13 | border: none;
14 | border-radius: 50%;
15 | font-size: 24px;
16 | cursor: pointer;
17 | position: relative;
18 | transition: transform 0.2s ease;
19 | }
20 | .circle-button:hover {
21 | transform: scale(1.1);
22 | }
23 |
--------------------------------------------------------------------------------
/BUTTONS/Button67/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Button by Alisha
7 |
8 |
9 |
10 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/BUTTONS/Button68/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | floating button
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/BUTTONS/Button68/style.css:
--------------------------------------------------------------------------------
1 | .floating-button {
2 | position: fixed;
3 | bottom: 20px;
4 | right: 20px;
5 | z-index: 10;
6 | animation: float 2s infinite ease-in-out;
7 | background-color:fuchsia;
8 | padding: 16px 45px;
9 | font-size: x-large;
10 | border-radius: 10px;
11 | }
12 |
13 | @keyframes float {
14 | 0%, 100% {
15 | transform: translateY(0);
16 | }
17 | 50% {
18 | transform: translateY(-10px);
19 | }
20 | }
21 |
22 | .floating-button button {
23 | padding: 10px 20px;
24 | font-size: 16px;
25 | border: none;
26 | border-radius: 50px;
27 | background-color: #007bff;
28 | color: white;
29 | cursor: pointer;
30 | }
31 |
32 | .floating-button button:hover {
33 | background-color: #0056b3;
34 | }
35 |
36 |
--------------------------------------------------------------------------------
/BUTTONS/Button69/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Barbie Theme Button
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/BUTTONS/Button69/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | height: 100vh;
6 | background-image: url('path_to_your_barbie_image.jpg'); /* Add your Barbie image */
7 | background-size: cover; /* Cover the entire background */
8 | background-position: center; /* Center the image */
9 | font-family: 'Arial', sans-serif;
10 | }
11 |
12 | .button-container {
13 | text-align: center;
14 | backdrop-filter: blur(5px); /* Optional: Adds a blur effect to the background behind the button */
15 | }
16 |
17 | .barbie-button {
18 | background-color: rgba(255, 111, 145, 0.8); /* Semi-transparent Barbie pink */
19 | color: white;
20 | font-size: 24px;
21 | font-weight: bold;
22 | padding: 15px 30px;
23 | border: none;
24 | border-radius: 25px; /* Rounded edges */
25 | cursor: pointer;
26 | transition: background-color 0.3s, transform 0.2s;
27 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
28 | }
29 |
30 | .barbie-button:hover {
31 | background-color: rgba(255, 74, 126, 0.8); /* Darker pink on hover */
32 | transform: scale(1.05); /* Slight grow effect */
33 | }
34 |
35 | .barbie-button:active {
36 | transform: scale(0.95); /* Slight shrink effect on click */
37 | }
38 |
--------------------------------------------------------------------------------
/BUTTONS/Button70/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Professional Button
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/BUTTONS/Button70/style.css:
--------------------------------------------------------------------------------
1 | .container {
2 | position: absolute;
3 | top: 50%;
4 | left: 50%;
5 | transform: translate(-50%, -50%);
6 | text-align: center;
7 | }
8 |
9 | .button-85 {
10 | padding: 0.6em 2em;
11 | border: none;
12 | outline: none;
13 | color: rgb(255, 255, 255);
14 | background: #111;
15 | cursor: pointer;
16 | position: relative;
17 | z-index: 0;
18 | border-radius: 10px;
19 | user-select: none;
20 | -webkit-user-select: none;
21 | touch-action: manipulation;
22 | }
23 |
24 | .button-85:before {
25 | content: "";
26 | background: linear-gradient(
27 | 45deg,
28 | #ff0000,
29 | #ff7300,
30 | #fffb00,
31 | #48ff00,
32 | #00ffd5,
33 | #002bff,
34 | #7a00ff,
35 | #ff00c8,
36 | #ff0000
37 | );
38 | position: absolute;
39 | top: -2px;
40 | left: -2px;
41 | background-size: 400%;
42 | z-index: -1;
43 | filter: blur(5px);
44 | -webkit-filter: blur(5px);
45 | width: calc(100% + 4px);
46 | height: calc(100% + 4px);
47 | animation: glowing-button-85 20s linear infinite;
48 | transition: opacity 0.3s ease-in-out;
49 | border-radius: 10px;
50 | }
51 |
52 | @keyframes glowing-button-85 {
53 | 0% {
54 | background-position: 0 0;
55 | }
56 | 50% {
57 | background-position: 400% 0;
58 | }
59 | 100% {
60 | background-position: 0 0;
61 | }
62 | }
63 |
64 | .button-85:after {
65 | z-index: -1;
66 | content: "";
67 | position: absolute;
68 | width: 100%;
69 | height: 100%;
70 | background: #222;
71 | left: 0;
72 | top: 0;
73 | border-radius: 10px;
74 | }
75 |
--------------------------------------------------------------------------------
/BUTTONS/Button71/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Button 98 by Abhishek Pihulkar
8 |
9 |
10 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/BUTTONS/Button71/style.css:
--------------------------------------------------------------------------------
1 | .button-98 {
2 | appearance: button;
3 | background-color: transparent;
4 | background-image: linear-gradient(to bottom, #fff, #f8eedb);
5 | border: 0 solid #e5e7eb;
6 | border-radius: .5rem;
7 | box-sizing: border-box;
8 | color: #482307;
9 | column-gap: 1rem;
10 | cursor: pointer;
11 | display: flex;
12 | font-family: ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
13 | font-size: 100%;
14 | font-weight: 700;
15 | line-height: 24px;
16 | margin: 0;
17 | outline: 2px solid transparent;
18 | padding: 1rem 1.5rem;
19 | text-align: center;
20 | text-transform: none;
21 | transition: all .1s cubic-bezier(.4, 0, .2, 1);
22 | user-select: none;
23 | -webkit-user-select: none;
24 | touch-action: manipulation;
25 | box-shadow: -6px 8px 10px rgba(81,41,10,0.1),0px 2px 2px rgba(81,41,10,0.2);
26 | }
27 |
28 | .button-98:active {
29 | background-color: #f3f4f6;
30 | box-shadow: -1px 2px 5px rgba(81,41,10,0.15),0px 1px 1px rgba(81,41,10,0.15);
31 | transform: translateY(0.125rem);
32 | }
33 |
34 | .button-98:focus {
35 | box-shadow: rgba(72, 35, 7, .46) 0 0 0 4px, -6px 8px 10px rgba(81,41,10,0.1), 0px 2px 2px rgba(81,41,10,0.2);
36 | }
37 |
--------------------------------------------------------------------------------
/BUTTONS/Button72/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Professional Button
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/BUTTONS/Button72/style.css:
--------------------------------------------------------------------------------
1 | /* CSS */
2 | .button-89 {
3 | --b: 3px; /* border thickness */
4 | --s: .45em; /* size of the corner */
5 | --color: #373B44;
6 |
7 | padding: calc(.5em + var(--s)) calc(.9em + var(--s));
8 | color: var(--color);
9 | --_p: var(--s);
10 | background:
11 | conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0)
12 | var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
13 | transition: .3s linear, color 0s, background-color 0s;
14 | outline: var(--b) solid #0000;
15 | outline-offset: .6em;
16 | font-size: 16px;
17 |
18 | border: 0;
19 |
20 | user-select: none;
21 | -webkit-user-select: none;
22 | touch-action: manipulation;
23 | }
24 |
25 | .button-89:hover,
26 | .button-89:focus-visible{
27 | --_p: 0px;
28 | outline-color: var(--color);
29 | outline-offset: .05em;
30 | }
31 |
32 | .button-89:active {
33 | background: var(--color);
34 | color: #fff;
35 | }
36 | .container {
37 | position: absolute;
38 | top: 50%;
39 | left: 50%;
40 | transform: translate(-50%, -50%);
41 | text-align: center;
42 | }
43 |
--------------------------------------------------------------------------------
/BUTTONS/Button73/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Beer Glass Button
7 |
8 |
9 |
10 |
11 |
12 |
13 |
🍺 Overflow!
14 |
15 |
16 |
11 |
12 |
13 |
14 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/BUTTONS/Button86/but.js:
--------------------------------------------------------------------------------
1 | const button = document.getElementById('moveButton');
2 |
3 | button.addEventListener('mouseover', () => {
4 | const randomX = Math.random() * 200 - 100;
5 | const randomY = Math.random() * 200 - 100;
6 | button.style.transform = `translate(${randomX}px, ${randomY}px)`;
7 | });
8 |
--------------------------------------------------------------------------------
/BUTTONS/Button87/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 3D Hover Button
7 |
8 |
9 |
10 |
11 | 3D Hover Button Example
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/BUTTONS/Button87/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | margin: 0;
4 | padding: 0;
5 | }
6 |
7 | .btn-3d {
8 | padding: 15px 30px;
9 | font-size: 18px;
10 | font-weight: bold;
11 | color: #fff;
12 | background-color: #007bff;
13 | border: none;
14 | border-radius: 8px;
15 | cursor: pointer;
16 | box-shadow: 0 8px #0056b3;
17 | transition: transform 0.2s ease, box-shadow 0.2s ease;
18 | }
19 |
20 | .btn-3d:hover {
21 | transform: translateY(-4px);
22 | box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2), 0 8px #0056b3;
23 | }
24 |
25 | .btn-3d:active {
26 | transform: translateY(2px);
27 | box-shadow: 0 4px #0056b3;
28 | }
29 |
30 |
--------------------------------------------------------------------------------
/BUTTONS/Button88/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Animated Gradient Button
8 |
9 |
10 |
11 |
12 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/BUTTONS/Button88/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | min-height: 100vh;
12 | background: #1b1b32;
13 | font-family: Arial, sans-serif;
14 | }
15 |
16 | .button-container {
17 | position: relative;
18 | padding: 10px;
19 | }
20 |
21 | .animated-button {
22 | position: relative;
23 | display: inline-block;
24 | padding: 15px 30px;
25 | font-size: 18px;
26 | font-weight: bold;
27 | color: #fff;
28 | text-transform: uppercase;
29 | text-decoration: none;
30 | border-radius: 12px;
31 | background: linear-gradient(45deg, #6a0dad, #8a2be2, #9400d3);
32 | background-size: 200% 200%;
33 | transition: all 0.4s ease;
34 | box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
35 | z-index: 1;
36 | animation: gradientMove 3s ease infinite;
37 | border: 4px solid transparent;
38 | }
39 |
40 | .animated-button::before {
41 | content: "";
42 | position: absolute;
43 | top: -2px;
44 | left: -2px;
45 | right: -2px;
46 | bottom: -2px;
47 | border-radius: 14px;
48 | background: linear-gradient(45deg, #6a0dad, #8a2be2, #9400d3, #8a2be2);
49 | background-size: 300% 300%;
50 | z-index: -1;
51 | animation: borderGradient 4s linear infinite;
52 | }
53 |
54 | @keyframes borderGradient {
55 | 0% {
56 | background-position: 0% 50%;
57 | }
58 |
59 | 50% {
60 | background-position: 100% 50%;
61 | }
62 |
63 | 100% {
64 | background-position: 0% 50%;
65 | }
66 | }
67 |
68 | @keyframes gradientMove {
69 | 0% {
70 | background-position: 0% 50%;
71 | }
72 |
73 | 50% {
74 | background-position: 100% 50%;
75 | }
76 |
77 | 100% {
78 | background-position: 0% 50%;
79 | }
80 | }
81 |
82 | .animated-button:hover {
83 | color: #ffe0ff;
84 | transform: translateY(-6px);
85 | box-shadow: 0px 10px 25px rgba(130, 0, 255, 0.6);
86 | }
87 |
88 | .animated-button:active {
89 | transform: translateY(2px);
90 | box-shadow: 0px 5px 15px rgba(130, 0, 255, 0.4);
91 | }
92 |
--------------------------------------------------------------------------------
/BUTTONS/Button89/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Stylish Button
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/BUTTONS/Button89/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | height: 100vh;
6 | background-color: #f4f4f4;
7 | margin: 0;
8 | }
9 |
10 | .stylish-button {
11 | background: linear-gradient(45deg, #ff6b6b, #f94d6e);
12 | color: white;
13 | padding: 15px 30px;
14 | border: none;
15 | border-radius: 50px;
16 | box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
17 | font-size: 18px;
18 | cursor: pointer;
19 | transition: all 0.3s ease;
20 | }
21 |
22 | .stylish-button:hover {
23 | background: linear-gradient(45deg, #f94d6e, #ff6b6b);
24 | transform: scale(1.05);
25 | box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
26 | }
27 |
28 | .stylish-button:active {
29 | transform: scale(0.98);
30 | box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
31 | }
32 |
--------------------------------------------------------------------------------
/BUTTONS/Button90/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Button by Abhishek
7 |
8 |
9 |
10 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/BUTTONS/Button90/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | height: 100vh;
4 | display: flex;
5 | align-items: center;
6 | justify-content: center;
7 | background-color: black;
8 | }
9 |
10 | nav ul {
11 | list-style-type: none;
12 | margin: 0;
13 | padding: 0;
14 | }
15 |
16 | nav ul li {
17 | --c: goldenrod;
18 | color: var(--c);
19 | font-size: 16px;
20 | border: 0.3em solid var(--c);
21 | border-radius: 0.5em;
22 | width: 12em;
23 | height: 3em;
24 | text-transform: uppercase;
25 | font-weight: bold;
26 | font-family: sans-serif;
27 | letter-spacing: 0.1em;
28 | text-align: center;
29 | line-height: 3em;
30 | position: relative;
31 | overflow: hidden;
32 | z-index: 1;
33 | transition: 0.5s;
34 | margin: 1em;
35 | }
36 |
37 | nav ul li span {
38 | position: absolute;
39 | width: 25%;
40 | height: 100%;
41 | background-color: var(--c);
42 | transform: translateY(150%);
43 | border-radius: 50%;
44 | left: calc((var(--n) - 1) * 25%);
45 | transition: 0.5s;
46 | transition-delay: calc((var(--n) - 1) * 0.1s);
47 | z-index: -1;
48 | }
49 |
50 | nav ul li:hover {
51 | color: black;
52 | }
53 |
54 | nav ul li:hover span {
55 | transform: translateY(0) scale(2);
56 | }
57 |
58 | nav ul li span:nth-child(1) {
59 | --n: 1;
60 | }
61 |
62 | nav ul li span:nth-child(2) {
63 | --n: 2;
64 | }
65 |
66 | nav ul li span:nth-child(3) {
67 | --n: 3;
68 | }
69 |
70 | nav ul li span:nth-child(4) {
71 | --n: 4;
72 | }
73 |
--------------------------------------------------------------------------------
/BUTTONS/Button91/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Button72
8 |
9 |
10 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/BUTTONS/Button91/style.css:
--------------------------------------------------------------------------------
1 | button {
2 | width: 165px;
3 | height: 62px;
4 | cursor: pointer;
5 | color: #fff;
6 | font-size: 17px;
7 | border-radius: 1rem;
8 | border: none;
9 | position: relative;
10 | background: #100720;
11 | transition: 0.1s;
12 | }
13 |
14 | button::after {
15 | content: '';
16 | width: 100%;
17 | height: 100%;
18 | background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(255,94,247,1) 17.8%, rgba(2,245,255,1) 100.2% );
19 | filter: blur(15px);
20 | z-index: -1;
21 | position: absolute;
22 | left: 0;
23 | top: 0;
24 | }
25 |
26 | button:active {
27 | transform: scale(0.9) rotate(3deg);
28 | background: radial-gradient( circle farthest-corner at 10% 20%, rgba(255,94,247,1) 17.8%, rgba(2,245,255,1) 100.2% );
29 | transition: 0.5s;
30 | }
31 |
--------------------------------------------------------------------------------
/BUTTONS/Button92/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Circle Button
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/BUTTONS/Button92/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | height: 100vh;
6 | background: #000000;
7 | }
8 | .circle-button {
9 | width: 50px;
10 | height: 50px;
11 | color: white;
12 | background-color: #ff5722;
13 | border: none;
14 | border-radius: 50%;
15 | font-size: 24px;
16 | cursor: pointer;
17 | position: relative;
18 | transition: transform 0.2s ease;
19 | }
20 | .circle-button:hover {
21 | transform: scale(1.1);
22 | }
23 |
--------------------------------------------------------------------------------
/BUTTONS/Button93/index.html:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/BUTTONS/Button93/style.css:
--------------------------------------------------------------------------------
1 | .toggle-border {
2 | border: 2px solid #f0ebeb;
3 | border-radius: 130px;
4 | margin-bottom: 45px;
5 | padding: 1px 2px;
6 | background: linear-gradient(to bottom right, white, rgba(220,220,220,.5)), white;
7 | box-shadow: 0 0 0 2px #fbfbfb;
8 | cursor: pointer;
9 | display: flex;
10 | align-items: center;
11 | }
12 |
13 | .toggle-border:last-child {
14 | margin-bottom: 0;
15 | }
16 |
17 | .toggle-border input[type="checkbox"] {
18 | display: none;
19 | }
20 |
21 | .toggle-border label {
22 | position: relative;
23 | display: inline-block;
24 | width: 65px;
25 | height: 20px;
26 | background: #d13613;
27 | border-radius: 80px;
28 | cursor: pointer;
29 | box-shadow: inset 0 0 16px rgba(0,0,0,.3);
30 | transition: background .5s;
31 | }
32 |
33 | .toggle-border input[type="checkbox"]:checked + label {
34 | background: #13d162;
35 | }
36 |
37 | .handle {
38 | position: absolute;
39 | top: -8px;
40 | left: -10px;
41 | width: 35px;
42 | height: 35px;
43 | border: 1px solid #e5e5e5;
44 | background: repeating-radial-gradient(circle at 50% 50%, rgba(200,200,200,.2) 0%, rgba(200,200,200,.2) 2%, transparent 2%, transparent 3%, rgba(200,200,200,.2) 3%, transparent 3%), conic-gradient(white 0%, silver 10%, white 35%, silver 45%, white 60%, silver 70%, white 80%, silver 95%, white 100%);
45 | border-radius: 50%;
46 | box-shadow: 3px 5px 10px 0 rgba(0,0,0,.4);
47 | transition: left .4s;
48 | }
49 |
50 | .toggle-border input[type="checkbox"]:checked + label > .handle {
51 | left: calc(100% - 35px + 10px);
52 | }
53 |
--------------------------------------------------------------------------------
/BUTTONS/Button94/index.html:
--------------------------------------------------------------------------------
1 |
21 |
--------------------------------------------------------------------------------
/BUTTONS/Button94/style.css:
--------------------------------------------------------------------------------
1 | /* From Uiverse.io by andrew-demchenk0 */
2 | .button {
3 | display: flex;
4 | justify-content: center;
5 | align-items: center;
6 | padding: 6px 12px;
7 | gap: 8px;
8 | height: 34px;
9 | width: 112px;
10 | border: none;
11 | background: #ff362b34;
12 | border-radius: 20px;
13 | cursor: pointer;
14 | }
15 |
16 | .lable {
17 | line-height: 20px;
18 | font-size: 17px;
19 | color: #ff342b;
20 | letter-spacing: 1px;
21 | }
22 |
23 | .button:hover {
24 | background: #ff362b52;
25 | }
26 |
27 | .button:hover .svg-icon {
28 | animation: spin 2s linear infinite;
29 | }
30 |
31 | @keyframes spin {
32 | 0% {
33 | transform: rotate(0deg);
34 | }
35 |
36 | 100% {
37 | transform: rotate(-360deg);
38 | }
39 | }
40 |
41 |
--------------------------------------------------------------------------------
/BUTTONS/Button95/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Butterfly Button with Animation
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
Click Me
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
32 |
33 |
34 |
42 |
😋
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/BUTTONS/Button99/script.js:
--------------------------------------------------------------------------------
1 | const checkboxes = document.querySelectorAll('.customCheckBoxInput');
2 | const messageDiv = document.getElementById('message');
3 | const emojiDiv = document.getElementById('emoji');
4 |
5 | checkboxes.forEach(checkbox => {
6 | checkbox.addEventListener('change', updateMessage);
7 | });
8 |
9 | function updateMessage() {
10 | const checkedCount = Array.from(checkboxes).filter(checkbox => checkbox.checked).length;
11 | messageDiv.classList.remove('licking-animation'); // Resetting animation class
12 | emojiDiv.classList.remove('licking-animation'); // Resetting animation class
13 |
14 | if (checkedCount === 1) {
15 | messageDiv.textContent = "You're onto something";
16 | messageDiv.style.display = "block";
17 | emojiDiv.style.display = "none"; // Hide emoji if not all checkboxes are checked
18 | } else if (checkedCount === 2) {
19 | messageDiv.textContent = "You're Very Close";
20 | messageDiv.style.display = "block";
21 | emojiDiv.style.display = "none"; // Hide emoji if not all checkboxes are checked
22 | } else if (checkedCount === 3) {
23 | messageDiv.textContent = "Wallahi! You got the Secret Sauce!";
24 | messageDiv.style.display = "block";
25 | emojiDiv.style.display = "block"; // Show emoji when all checkboxes are checked
26 | emojiDiv.classList.add('licking-animation'); // Adding animation class
27 | } else {
28 | messageDiv.style.display = "none"; // Hide message if no checkboxes are checked
29 | emojiDiv.style.display = "none"; // Hide emoji if no checkboxes are checked
30 | }
31 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | # CSS Buttons Contribution Repository
3 |
4 | 
5 |
6 | ## How to Contribute
7 | 1. Fork the repository.
8 | 2. Add your custom button code in a new file or modify an existing one.
9 | 3. Submit a pull request with a description of your button style.
10 |
11 | NOTE: ADD HTML AND CSS SEPERATE FILES!
12 |
13 | Let's create a diverse collection of CSS buttons together!
14 |
15 | ## Example
16 |
17 | ### 1. Simple Animated Gradient Button
18 | ```html
19 |
20 |
21 |
44 | ```
45 | 
46 |
47 | # Contributors
48 |
49 |
50 | 
51 |
52 |
53 |
54 | \
55 | _A project by Association of Computer Engineering Students, [DIT Pimpri](https://engg.dypvp.edu.in/)_
56 |
57 | 
58 |
--------------------------------------------------------------------------------
/static/Button Example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/acesdit/css-buttons/3497d28c5485385c76412e72ff7ed6971d5ad2c3/static/Button Example.png
--------------------------------------------------------------------------------
/static/aces-badge.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/acesdit/css-buttons/3497d28c5485385c76412e72ff7ed6971d5ad2c3/static/aces-badge.png
--------------------------------------------------------------------------------
/static/example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/acesdit/css-buttons/3497d28c5485385c76412e72ff7ed6971d5ad2c3/static/example.png
--------------------------------------------------------------------------------
23 | 
26 | 
29 |