From 30c3c641bd21c0693f2dc8bd9d6bb0ae94305bc3 Mon Sep 17 00:00:00 2001 From: Vishwajeet Londhe Date: Wed, 16 Jul 2025 12:59:18 +0530 Subject: [PATCH] added button --- assets/css/style.css | 151 ++++++++++++++++++++++--------------------- buttons/buttons.css | 44 +++++++++++++ index.html | 12 ++++ 3 files changed, 135 insertions(+), 72 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 5da92b3..a18af10 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,8 +1,13 @@ +/* Reset and Base Styles */ * { font-family: 'Inter', sans-serif; margin: 0; padding: 0; - box-sizing: border-box + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; } :root { @@ -30,7 +35,6 @@ body::-webkit-scrollbar { body::-webkit-scrollbar-thumb { border-radius: 11px; - /* -webkit-box-shadow: inset -5px 0px 29px 0 #ec4896; */ background-color: rgb(99, 99, 99); } @@ -41,8 +45,10 @@ main { a { text-decoration: none; + color: var(--default-link-color); } +/* Navbar */ .navbar { display: flex; flex-direction: column; @@ -53,23 +59,24 @@ a { .title { font-size: 3rem; - padding-top: 0rem; font-weight: 700; + padding-top: 0rem; } .content-text { - padding: 1rem 0rem 3rem 0rem; + padding: 1rem 0 3rem 0; font-size: 1.2rem; } +/* Button Card */ .button-container { display: flex; align-items: center; justify-content: space-around; - width: 18rem; - height: 18rem; + width: clamp(200px, 40vw, 18rem); + height: clamp(200px, 40vw, 18rem); background-color: var(--bg-btn-card); - transition: 0.4s; + transition: transform 0.4s ease, box-shadow 0.3s ease; border-radius: var(--card-border-radius); flex-direction: column; position: relative; @@ -77,8 +84,10 @@ a { .button-container:hover { transform: translateY(-5px); + box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.3); } +/* Wrapper */ .container { display: flex; justify-content: center; @@ -86,6 +95,7 @@ a { gap: 2rem; } +/* Created By Section */ .createdby-section { width: 100%; text-align: center; @@ -97,16 +107,21 @@ a { } .createdby-section a { - color: rgb(129 120 255 / 1); + color: var(--default-link-color); text-decoration: none; } +/* Button Text */ .btn-def-text { margin-top: 20px; } +.btn-def-text:hover { + color: var(--link-hover-color); + cursor: pointer; +} -/* footer stat here */ +/* Footer */ .footer-main { margin-top: 2rem; } @@ -120,35 +135,6 @@ a { flex-direction: column; } - -@media (min-width: 1280px) { - .footer-container { - max-width: 1280px; - } -} - -@media (min-width: 1024px) { - .footer-container { - max-width: 1024px; - } -} - -@media (min-width: 768px) { - .footer-container { - max-width: 768px; - } -} - -@media (min-width: 640px) { - .footer-container { - flex-direction: row; - max-width: 640px; - } -} - - - - .footer-title { display: flex; align-items: center; @@ -157,31 +143,15 @@ a { color: white; } -@media (min-width: 768px) { - .footer-title { - justify-content: flex-start; - } -} - .footer-copyright { margin-top: 1rem; font-size: .875rem; line-height: 1.25rem; - color: var(--default-color) -} - -@media (min-width: 640px) { - .footer-copyright { - padding: 0.5rem 0 0.5rem 1rem; - margin-left: 1rem; - margin: 0 0 0 1rem; - border-left-width: 2px; - border-color: rgba(31, 41, 55); - } + color: var(--default-color); } -.footer-copyright>a { - color: rgb(129 120 255 / 1) +.footer-copyright > a { + color: var(--link-hover-color); } .socials-span { @@ -190,33 +160,70 @@ a { display: inline-flex; } -@media (min-width: 640px) { - .socials-span { - margin-left: auto; - margin-top: 0; - justify-content: flex-start; - } -} - - -.socials-span>a { +.socials-span > a { color: var(--default-color); + transition: all 0.3s ease-in-out; } -.socials-span>a:hover { +.socials-span > a:hover { color: var(--link-hover-color); transform: scale(1.4); - transition: all 0.3s ease-in-out; } -.socials-span>a:not(:first-child) { +.socials-span > a:not(:first-child) { margin-left: 0.75rem; } -.socials-span>a>svg { +.socials-span > a > svg { width: 1.25rem; height: 1.25rem; } +/* Responsive Layouts */ +@media (max-width: 480px) { + body { + padding: 0 10px; + } +} + +@media (min-width: 640px) { + .footer-container { + flex-direction: row; + max-width: 640px; + } + + .footer-title { + justify-content: flex-start; + } + + .socials-span { + margin-left: auto; + margin-top: 0; + justify-content: flex-start; + } + + .footer-copyright { + padding: 0.5rem 0 0.5rem 1rem; + margin-left: 1rem; + border-left-width: 2px; + border-color: rgba(31, 41, 55); + } +} + +@media (min-width: 768px) { + .footer-container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .footer-container { + max-width: 1024px; + } +} -/* footer ends here */ \ No newline at end of file +@media (min-width: 1280px) { + .footer-container { + max-width: 1280px; + } +} \ No newline at end of file diff --git a/buttons/buttons.css b/buttons/buttons.css index d3dc362..0279d5f 100644 --- a/buttons/buttons.css +++ b/buttons/buttons.css @@ -2703,3 +2703,47 @@ a:focus-visible { } } +/* Vishwajeet's button */ + +.vishwajeet-btn-2 { + position: relative; + display: inline-block; + width: 200px; + height: 69px; + padding-left: 35px; + line-height: 65px; + font-size: 1.5rem; + font-weight: 700; + font-family: 'Inter', sans-serif; + color: #000; + background: linear-gradient(45deg, transparent 5%, #F8F005 5%); + border: none; + box-shadow: 6px 0px 0px #00E6F6; + cursor: pointer; + transition: all 0.3s ease; + z-index: 1; + overflow: hidden; + border-radius: 12px; +} + +.vishwajeet-btn-2::after { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(45deg, #00E6F6, #F8F005); + transition: all 0.4s ease-in-out; + z-index: -1; +} + +.vishwajeet-btn-2:hover::after { + left: 0; +} + +.vishwajeet-btn-2:hover { + color: #000; + transform: translateY(-3px); + box-shadow: 8px 0px 15px rgba(0, 230, 246, 0.5); +} diff --git a/index.html b/index.html index a8dbf87..0eb5f8d 100644 --- a/index.html +++ b/index.html @@ -709,6 +709,18 @@ + +
+ +
+ Created by + Vishwajeet +
+
+ + + + pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy