Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Delete Effect Button #1300

Closed
wants to merge 32 commits into from
Closed

Added Delete Effect Button #1300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
c8f570f
added Flower effect button
Saipradyumnagoud Jun 21, 2024
d7baebc
Rename index.html to button.html
Saipradyumnagoud Jun 26, 2024
9eb8068
Rename button.html to buttons.html
Saipradyumnagoud Jun 26, 2024
fdee338
Rename buttons.html to index.html
Saipradyumnagoud Jun 26, 2024
023fb70
Update buttons.html
Saipradyumnagoud Jun 26, 2024
3d1fcf5
Update index.html
Rakesh9100 Jun 26, 2024
8ab3277
Update style.css
Rakesh9100 Jun 26, 2024
ab34b8c
Update buttons.html
Rakesh9100 Jun 26, 2024
2f94622
Merge branch 'Rakesh9100:main' into main
Saipradyumnagoud Jun 27, 2024
8e52b9a
Added Like Effect Button
Saipradyumnagoud Jun 27, 2024
4b80e00
Update buttons.html
Saipradyumnagoud Jun 27, 2024
4ae5cc8
Update index.html
Rakesh9100 Jul 7, 2024
bb96254
Update style.css
Rakesh9100 Jul 7, 2024
9e9b73b
Update buttons.html
Rakesh9100 Jul 7, 2024
5cbd1b5
Merge branch 'Rakesh9100:main' into main
Saipradyumnagoud Jul 8, 2024
1a59643
Added BookMark Effect Button
Saipradyumnagoud Jul 8, 2024
9792be2
Updated buttons.html
Saipradyumnagoud Jul 8, 2024
7262b6e
Update and rename index.html to index.html
Rakesh9100 Jul 13, 2024
711824e
Update and rename styles.css to style.css
Rakesh9100 Jul 13, 2024
6a4192a
Update buttons.html
Rakesh9100 Jul 13, 2024
03ddcce
Update buttons.html
Rakesh9100 Jul 13, 2024
8d9a0c1
Merge branch 'Rakesh9100:main' into main
Saipradyumnagoud Jul 14, 2024
cd0ccc9
Added Glitch Effect Button
Saipradyumnagoud Jul 14, 2024
08ce748
Updated buttons.html
Saipradyumnagoud Jul 14, 2024
a338457
Update index.html
Rakesh9100 Jul 14, 2024
afbd0c2
Update and rename styles.css to style.css
Rakesh9100 Jul 14, 2024
deb6f81
Update buttons.html
Rakesh9100 Jul 14, 2024
506dd63
Merge branch 'Rakesh9100:main' into main
Saipradyumnagoud Jul 28, 2024
a4cf787
Added Delete Effect Button
Saipradyumnagoud Jul 28, 2024
0ab8eb0
Update buttons.html
Saipradyumnagoud Jul 28, 2024
0756be0
Update index.html
Rakesh9100 Aug 2, 2024
87f77ee
Update and rename styles.css to style.css
Rakesh9100 Aug 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions Components/Buttons/Delete-Effect-Button/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Delete Effect Button</title>
</head>
<body>
<button class="button">
<svg viewBox="0 0 448 512" class="svgIcon">
<path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"></path>
</svg>
</button>
</body>
</html>
65 changes: 65 additions & 0 deletions Components/Buttons/Delete-Effect-Button/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
html,
body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
background-color: #f0f0f0;
}

.button {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgb(20, 20, 20);
border: none;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.164);
cursor: pointer;
transition-duration: .3s;
overflow: hidden;
position: relative;
}

.svgIcon {
width: 12px;
transition-duration: .3s;
}

.svgIcon path {
fill: white;
}

.button:hover {
width: 140px;
border-radius: 50px;
transition-duration: .3s;
background-color: rgb(255, 69, 69);
align-items: center;
}

.button:hover .svgIcon {
width: 50px;
transition-duration: .3s;
transform: translateY(60%);
}

.button::before {
position: absolute;
top: -20px;
content: "Delete";
color: white;
transition-duration: .3s;
font-size: 2px;
}

.button:hover::before {
font-size: 13px;
opacity: 1;
transform: translateY(30px);
transition-duration: .3s;
}
15 changes: 14 additions & 1 deletion assets/html_files/buttons.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,19 @@ <h1>Delete Animation Button</h1>
</a>
</div>
</div>
<div class="box">
<h1>Delete Effect Button</h1>
<div class="preview">
<a href="../../Components/Buttons/Delete-Effect-Button/index.html" title="Live Preview" target="_blank">
<img src="../images/link.png">
</a>
</div>
<div class="source">
<a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Buttons/Delete-Effect-Button" title="Source Code" target="_blank">
<img src="../images/github.png">
</a>
</div>
</div>
<div class="box">
<h1>Flipside Button</h1>
<div class="preview">
Expand Down Expand Up @@ -631,4 +644,4 @@ <h1>Wiggle Button</h1>
<script src="../js_files/dark-mode.js"></script>
</body>

</html>
</html>