diff --git a/Art/detonate-button/detonate-button.gif b/Art/detonate-button/detonate-button.gif
new file mode 100644
index 000000000..41a6276b9
Binary files /dev/null and b/Art/detonate-button/detonate-button.gif differ
diff --git a/Art/detonate-button/index.html b/Art/detonate-button/index.html
new file mode 100644
index 000000000..1bf73cbcc
--- /dev/null
+++ b/Art/detonate-button/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Art/detonate-button/main.css b/Art/detonate-button/main.css
new file mode 100644
index 000000000..d426dd50a
--- /dev/null
+++ b/Art/detonate-button/main.css
@@ -0,0 +1,131 @@
+.container {
+ text-align: center;
+ height: 100vh;/*reason it was not centering, i had height at just 100% instead of 100vh*/
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.doomsday {
+ margin: 0 auto;
+ height: 80px;
+ color: white;
+ background-color: #dc143c;
+ font-size: 2em;
+ font-weight: bold;
+ animation-name: normalmode;
+ animation-duration: 2s;
+ animation-timing-function: linear;
+ animation-delay: 0;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+ animation-fill-mode: both;
+ border: 2mm ridge rgba(50, 1, 3, 0.6);
+ border-radius: 10px;
+}
+
+.doomsday:hover {
+ color: white;
+ font-size: 2em;
+ font-weight: bold;
+ animation-name: hovering-active;
+ animation-duration: 2s;
+ animation-timing-function: linear;
+ animation-delay: 0;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+ animation-fill-mode: both;
+}
+
+/* Not infinite so it stays big and explodes in the end*/
+.doomsday:active {
+ color: white;
+ font-size: 2em;
+ font-weight: bold;
+ animation-name: hovering-active;
+ animation-duration: 0.3s;
+ animation-timing-function: linear;
+ animation-delay: 0;
+ animation-iteration-count: 29;
+ animation-direction: alternate;
+ animation-fill-mode: both;
+}
+
+@keyframes normalmode {
+
+ 0%,
+ 10% {
+ color: orange;
+ }
+
+ 40% {
+ color: yellow;
+ }
+
+ 60% {
+ color: green;
+ }
+
+ 100% {
+ color: #dc143c;
+ }
+}
+
+
+@keyframes hovering-active {
+ 0% {
+ transform: translate(0) scale(1);
+ }
+
+ 10% {
+ transform: translate(-2px, 2px);
+ color: orange;
+ }
+
+ 20% {
+ transform: translate(2px, -2px);
+ color: orange;
+ }
+
+ 30% {
+ transform: translate(-2px, 2px) scale(1.2);
+ color: yellow;
+ }
+
+ 40% {
+ transform: translate(-3px, -3px) scale(1.2);
+ color: yellow;
+ }
+
+ 50% {
+ transform: translate(3px, -3px) scale(1.2);
+ color: yellow;
+ }
+
+ 60% {
+ transform: translate(3px, 3px) scale(1.2);
+ color: green;
+ }
+
+ 70% {
+ transform: translate(-4px, -4px) scale(1.2);
+ color: green;
+ }
+
+ 80% {
+ transform: translate(4px, -4px) scale(1.5);
+ color: green;
+ }
+
+ 90% {
+ transform: translate(5px, -5px) scale(1.5);
+ color: #dc143c;
+ }
+
+ 100% {
+ transform: translate(0) scale(2.5);
+ color: #dc143c;
+ animation-delay: 1s;
+
+ }
+}
\ No newline at end of file
diff --git a/include.js b/include.js
index 20bd7d97e..45e9969f5 100644
--- a/include.js
+++ b/include.js
@@ -6532,7 +6532,14 @@ let cards = [
imageLink: './Art/marion/smiles.gif',
author: 'Marion',
githubLink: 'https://github.com/marionjudy13'
- }
+ },
+ {
+ artName: 'Detonation Button',
+ pageLink: './Art/detonate-button/index.html',
+ imageLink: './Art/detonate-button/detonate-button.gif',
+ author: 'carv066',
+ githubLink: 'https://github.com/carv0066'
+ }
];
// +--------------------------------------------------------------------------------+