From a75672cf08631fb88d9d6755f39fbe92021aa68d Mon Sep 17 00:00:00 2001 From: PVBharadwaj Date: Thu, 10 Aug 2023 17:47:03 +0530 Subject: [PATCH] CSS start button added --- Animations-CSS/start button/index.html | 15 ++++++++ Animations-CSS/start button/styles.css | 53 ++++++++++++++++++++++++++ 2 files changed, 68 insertions(+) create mode 100644 Animations-CSS/start button/index.html create mode 100644 Animations-CSS/start button/styles.css diff --git a/Animations-CSS/start button/index.html b/Animations-CSS/start button/index.html new file mode 100644 index 0000000000..e1a45dd285 --- /dev/null +++ b/Animations-CSS/start button/index.html @@ -0,0 +1,15 @@ + + + + + + + new button + + + +
+ +
+ + diff --git a/Animations-CSS/start button/styles.css b/Animations-CSS/start button/styles.css new file mode 100644 index 0000000000..8b517446f3 --- /dev/null +++ b/Animations-CSS/start button/styles.css @@ -0,0 +1,53 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body { + display: flex; + min-height: 100vh; + justify-content: center; + align-items: center; + background-color: #004106; + } + + .btn{ + font-size: 25px; + padding: 30px; + border-radius: 50%; + background-color: rgb(0, 255, 0); + color: #224831; + border-radius: 50%; + border: solid; + border-color: #1d8600; + transition: 1s; + } + + .btn:hover{ + font-size: 25px; + padding: 30px; + border-radius: 50%; + background-color: rgb(17, 255, 0); + color: #224831; + border-radius: 50%; + border-color: #4a6c41; + transition: 1s; + animation: glowing 1s infinite alternate; + } + + @keyframes glowing { + 0% { + background-color: rgb(0, 255, 0); + box-shadow: 0 0 3px rgb(213, 255, 176); + } + 50% { + background-color: rgb(131, 247, 122); + box-shadow: 0 0 10px rgb(198, 255, 197); + } + 100% { + background-color: rgb(0, 255, 0); + box-shadow: 0 0 3px rgb(213, 255, 176); + } + } + \ No newline at end of file