Skip to content

Commit b3ba2ef

Browse files
aayush105aayush105
authored
Merge pull request #901 from kaif969/feat/deleteButton
Add Animated Delete Button Implementation Using Pure CSS
2 parents f5a04b7 + e10b877 commit b3ba2ef

File tree

3 files changed

+113
-0
lines changed

3 files changed

+113
-0
lines changed

‎Button/Delete-Button/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Delete Button</title>
8+
</head>
9+
<body>
10+
<button class="noselect">
11+
<span class="text">Delete</span>
12+
<span class="icon">
13+
<svg
14+
width="24"
15+
height="24"
16+
viewBox="0 0 24 24"
17+
xmlns="http://www.w3.org/2000/svg"
18+
>
19+
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
20+
<g
21+
id="SVGRepo_tracerCarrier"
22+
stroke-linecap="round"
23+
stroke-linejoin="round"
24+
></g>
25+
<g id="SVGRepo_iconCarrier">
26+
<path
27+
d="M0 14.545L1.455 16 8 9.455 14.545 16 16 14.545 9.455 8 16 1.455 14.545 0 8 6.545 1.455 0 0 1.455 6.545 8z"
28+
fill-rule="evenodd"
29+
></path>
30+
</g>
31+
</svg>
32+
</span>
33+
</button>
34+
</body>
35+
</html>

‎Button/Delete-Button/style.css‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/* */
2+
3+
body{
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
min-height: 100vh;
8+
background: #222
9+
}
10+
11+
button {
12+
width: 150px;
13+
height: 50px;
14+
cursor: pointer;
15+
display: flex;
16+
align-items: center;
17+
background: red;
18+
border: none;
19+
border-radius: 5px;
20+
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
21+
22+
}
23+
24+
/* for the animations duration */
25+
button, button span {
26+
transition: 200ms;
27+
}
28+
29+
button .text {
30+
/* move on the X axis or horizontal axis to the right */
31+
transform: translateX(35px);
32+
color: white;
33+
font-weight: bold;
34+
}
35+
36+
button .icon {
37+
position: absolute;
38+
border-left: 1px solid #c41b1b;
39+
transform: translateX(110px);
40+
41+
/* moved to the right on X Axis */
42+
43+
height: 40px;
44+
width: 40px;
45+
display: flex;
46+
align-items: center;
47+
justify-content: center;
48+
}
49+
50+
/* select the SVG */
51+
button svg {
52+
width: 15px;
53+
fill: #eee;
54+
}
55+
56+
/* Hover Effects (on button) */
57+
button:hover{
58+
background: #ff3636;
59+
}
60+
/* Text Disapears when we hover on the button */
61+
button:hover .text {
62+
color: transparent;
63+
}
64+
button:hover .icon {
65+
width: 150px;
66+
/* remove the border on the side */
67+
border-left: none;
68+
/* move to the left */
69+
transform: translate(0);
70+
}
71+
button:focus {
72+
outline: none;
73+
}
74+
/* click effect (make the svg smaller when clicked) */
75+
button:active icon svg {
76+
transform: scale(0.8);
77+
}

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -324,6 +324,7 @@ <h1>You Dont Need JavaScript</h1>
324324
<a href="./misc/neon-button.html">Button Neon 2</a>
325325
<a href="./misc/shake-button.html">Shake Button</a>
326326
<a href="./download_buttons/index.html">Download Buttons</a>
327+
<a href="./Button/Delete-Button/index.html">Delete Button</a>
327328
</td>
328329
</tr>
329330

0 commit comments

Comments
 (0)