From e0d4be1f47f1adc3b27693324597325acd9c3f35 Mon Sep 17 00:00:00 2001 From: Brahmadutta02 Date: Sun, 23 Oct 2022 15:18:20 +0530 Subject: [PATCH] Adding website header --- Website Header/index.html | 53 +++++++++++++ Website Header/style.css | 157 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 210 insertions(+) create mode 100644 Website Header/index.html create mode 100644 Website Header/style.css diff --git a/Website Header/index.html b/Website Header/index.html new file mode 100644 index 00000000..ce27135c --- /dev/null +++ b/Website Header/index.html @@ -0,0 +1,53 @@ + + + + + Animated Click Effect + + + +
+ +
+ + + \ No newline at end of file diff --git a/Website Header/style.css b/Website Header/style.css new file mode 100644 index 00000000..d0fb5863 --- /dev/null +++ b/Website Header/style.css @@ -0,0 +1,157 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Times New Roman', Times, serif; +} +.hero{ + width: 100%; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} +.btn{ + display: inline-block; + font-size: 18px; + padding: 24px 70px; + background: #ff1876; + color: #fff; + border-radius: 40px; + border: none; + outline: none; + cursor: pointer; + position: relative; + box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5); + transition: box-shadow 0.25s; + z-index: 2; +} +.btn:active{ + background: #d80972; + box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2); +} +.btn span{ + background: #ff1876; + border: 1px solid #ff1876; + width: 14px; + height: 14px; + border-radius: 50%; + position: absolute; + z-index: -1; + transform: scale(0); +} +.btn span:nth-child(1){ + top: -20%; + left: -10%; +} +.btn span:nth-child(2){ + top: -130%; + left: 0; +} +.btn span:nth-child(3){ + top: -50%; + left: 10%; + background: transparent; +} +.btn span:nth-child(5){ + top: -90%; + left: 28%; +} +.btn span:nth-child(6){ + top: -70%; + left: 42%; +} +.btn span:nth-child(7){ + top: -90%; + left: 28%; + background: transparent; +} +.btn span:nth-child(8){ + top: -50%; + left: 70%; +} +.btn span:nth-child(9){ + top: -120%; + left: 80%; +} +.btn span:nth-child(10){ + top: -70%; + left: 90%; +} +.btn span:nth-child(11){ + top: -80%; + left: 100%; + background: transparent; +} +.btn span:nth-child(12){ + top: -50%; + left: 110%; +} +.btn span:nth-child(13){ + top: 40%; + left: -20%; +} +.btn span:nth-child(14){ + top: 60%; + left: 120%; + background: transparent; +} +.btn span:nth-child(15){ + top: 160%; + left: -10%; +} +.btn span:nth-child(16){ + top: 120%; + left: 5%; + background: transparent; +} +.btn span:nth-child(17){ + top: 180%; + left: 10%; +} +.btn span:nth-child(18){ + top: 130%; + left: 20%; +} +.btn span:nth-child(19){ + top: 180%; + left: 33%; + background: transparent; +} +.btn span:nth-child(20){ + top: 180%; + left: 55%; +} +.btn span:nth-child(21){ + top: 160%; + left: 75%; +} +.btn span:nth-child(22){ + top: 130%; + left: 88%; + background: transparent; +} +.btn span:nth-child(23){ + top: 140%; + left: 100%; +} +.btn span:nth-child(24){ + top: 190%; + left: 120%; +} +/* +.anim{ + animation: moving 0.5s linear reverse forwards; +} +@keyframes moving{ + 0%{ + transform: scale(0); + } + 10%{ + transform: scale(1); + } + 100%{ + top: 50%; + left: 50%; + } +} */