├── .vscode └── settings.json ├── FavIcon.png ├── Screen fingerprint.gif ├── Scroll.js ├── animate.js ├── app.js ├── assets ├── bootstrap │ ├── bootstrap.bundle.min.js │ └── bootstrap.min.css ├── cross.jpg ├── github.png ├── linkedin.png ├── menu.svg ├── moon.png └── sun.png ├── css ├── fdback.css ├── main.css └── rateUs.css ├── daksh.jpg ├── design_button ├── ASIF-MANDAL.css ├── AftabShare.css ├── Anjalikumari123456.css ├── RatnojitSaha-1.css ├── RatnojitSaha-10.css ├── RatnojitSaha-11.css ├── RatnojitSaha-12.css ├── RatnojitSaha-13.css ├── RatnojitSaha-14.css ├── RatnojitSaha-15.css ├── RatnojitSaha-16.css ├── RatnojitSaha-17.css ├── RatnojitSaha-18.css ├── RatnojitSaha-19.css ├── RatnojitSaha-2.css ├── RatnojitSaha-20.css ├── RatnojitSaha-21.css ├── RatnojitSaha-22.css ├── RatnojitSaha-23.css ├── RatnojitSaha-24.css ├── RatnojitSaha-25.css ├── RatnojitSaha-26.css ├── RatnojitSaha-27.css ├── RatnojitSaha-28.css ├── RatnojitSaha-29.css ├── RatnojitSaha-3.css ├── RatnojitSaha-30.css ├── RatnojitSaha-31.css ├── RatnojitSaha-4.css ├── RatnojitSaha-5.css ├── RatnojitSaha-6.css ├── RatnojitSaha-7.css ├── RatnojitSaha-8.css ├── RatnojitSaha-9.css ├── Sanglap-Halder.css ├── Sruti-sahini.css ├── SuvayuN-1.css ├── SuvayuN-2.css ├── SuvayuN-3.css ├── SuvayuN-4.css ├── SuvayuN-5.css ├── SuvayuN-6.css ├── SuvayuN-7.css ├── SuvayuN-8.css ├── SuvayuN.css ├── TanushreeBorase.css ├── ayesha-1.css ├── ayesha-2.css ├── beprodeep4718.css ├── full.css ├── kom-senapati-1.css ├── krittika2004.css ├── nandita27 │ ├── nandita27-1.css │ ├── nandita27-10.css │ ├── nandita27-2.css │ ├── nandita27-3.css │ ├── nandita27-4.css │ ├── nandita27-5.css │ ├── nandita27-6.css │ ├── nandita27-7.css │ ├── nandita27-8.css │ └── nandita27-9.css ├── pranjal.css ├── rimi1.css ├── rimi10.css ├── rimi11.css ├── rimi12.css ├── rimi2.css ├── rimi3.css ├── rimi4.css ├── rimi5.css ├── rimi6.css ├── rimi7.css ├── rimi8.css ├── rimi9.css ├── rupalimkrishnan-1.css ├── shahilaf_01.css ├── shikha.css ├── swarnade-1.css ├── swarnade-10.css ├── swarnade-11.css ├── swarnade-2.css ├── swarnade-3.css ├── swarnade-4.css ├── swarnade-5.css ├── swarnade-6.css ├── swarnade-7.css ├── swarnade-8.css ├── swarnade-9.css ├── swarnade.css ├── v.css ├── vishal.css ├── yashwanth │ ├── yashwanth.css │ ├── yashwanth1.css │ ├── yashwanth2.css │ ├── yashwanth3.css │ ├── yashwanth4.css │ ├── yashwanth5.css │ ├── yashwanth6.css │ └── yashwanth7.css ├── yusra05.css ├── zul132-1.css ├── zul132-10.css ├── zul132-2.css ├── zul132-3.css ├── zul132-4.css ├── zul132-5.css ├── zul132-6.css ├── zul132-7.css ├── zul132-8.css └── zul132-9.css ├── feedback.html ├── footer_main.css ├── index.html ├── infopage ├── index.html └── style.css ├── loader.css ├── loading.html ├── rateUs.html ├── rateUs.js ├── rating.css ├── rating.html └── readme.md /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5504 3 | } -------------------------------------------------------------------------------- /FavIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swarnade/webdesign-switch/1e10060c3f8dac9825731ad6700bc5460e544844/FavIcon.png -------------------------------------------------------------------------------- /Screen fingerprint.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swarnade/webdesign-switch/1e10060c3f8dac9825731ad6700bc5460e544844/Screen fingerprint.gif -------------------------------------------------------------------------------- /Scroll.js: -------------------------------------------------------------------------------- 1 | let calcScrollValue = () => { 2 | let scrollProgress = document.getElementById("progress"); 3 | let progressValue = document.getElementById("progress-value"); 4 | let pos = document.documentElement.scrollTop; 5 | let calcHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; 6 | let scrollValue = Math.round((pos * 100) / calcHeight); 7 | if(pos>100){ 8 | scrollProgress.style.display = "grid"; 9 | } 10 | else{ 11 | scrollProgress.style.display = "none"; 12 | } 13 | scrollProgress.addEventListener("click", () => { 14 | document.documentElement.scrollTop = 0; 15 | }); 16 | scrollProgress.style.background = 'conic-gradient((white ${scrollValue}%, #d7d7d7 ${scrollValue}%)'; 17 | }; 18 | 19 | window.onscroll = calcScrollValue; 20 | window.onload = calcScrollValue; 21 | 22 | -------------------------------------------------------------------------------- /animate.js: -------------------------------------------------------------------------------- 1 | let boxes = document.querySelectorAll(".box-main"); 2 | 3 | console.log(boxes); 4 | Array.from(boxes).forEach((e)=> { 5 | e.classList.add("hide"); 6 | }) 7 | 8 | let footer = document.querySelector("footer"); 9 | footer.classList.add("hide"); 10 | 11 | let nav = document.querySelector("nav"); 12 | nav.classList.add("hide"); 13 | 14 | var loader = document.getElementById("preloader"); 15 | 16 | window.addEventListener("load" , function () { 17 | loader.style.display = "none"; 18 | 19 | setTimeout(() => { 20 | Array.from(boxes).forEach((e)=> { 21 | e.classList.remove("hide"); 22 | }) 23 | 24 | footer.classList.remove("hide"); 25 | nav.classList.remove("hide"); 26 | }, 8000); 27 | 28 | 29 | }) -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | function getUserPreference() { 2 | return localStorage.getItem('theme'); 3 | } 4 | function saveUserPreference(userPreference) { 5 | localStorage.setItem('theme', userPreference); 6 | } 7 | 8 | function getAppliedMode(userPreference) { 9 | if (userPreference === 'light') { 10 | return 'light'; 11 | } 12 | if (userPreference === 'dark') { 13 | return 'dark'; 14 | } 15 | } 16 | 17 | function setAppliedMode(mode) { 18 | document.documentElement.dataset.appliedMode = mode; 19 | } 20 | 21 | function rotatePreferences(userPreference) { 22 | if (userPreference === 'light') { 23 | return 'dark'; 24 | } 25 | if (userPreference === 'dark') { 26 | return 'light'; 27 | } 28 | } 29 | 30 | const themeDisplay = document.getElementById('mode'); 31 | const themeToggler = document.getElementById('color_mode'); 32 | 33 | let userPreference = getUserPreference(); 34 | setAppliedMode(getAppliedMode(userPreference)); 35 | themeDisplay.innerText = userPreference; 36 | 37 | themeToggler.onclick = () => { 38 | const newUserPref = rotatePreferences(userPreference); 39 | userPreference = newUserPref; 40 | saveUserPreference(newUserPref); 41 | themeDisplay.innerText = newUserPref; 42 | setAppliedMode(getAppliedMode(newUserPref)); 43 | } -------------------------------------------------------------------------------- /assets/cross.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swarnade/webdesign-switch/1e10060c3f8dac9825731ad6700bc5460e544844/assets/cross.jpg -------------------------------------------------------------------------------- /assets/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swarnade/webdesign-switch/1e10060c3f8dac9825731ad6700bc5460e544844/assets/github.png -------------------------------------------------------------------------------- /assets/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swarnade/webdesign-switch/1e10060c3f8dac9825731ad6700bc5460e544844/assets/linkedin.png -------------------------------------------------------------------------------- /assets/menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/moon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swarnade/webdesign-switch/1e10060c3f8dac9825731ad6700bc5460e544844/assets/moon.png -------------------------------------------------------------------------------- /assets/sun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swarnade/webdesign-switch/1e10060c3f8dac9825731ad6700bc5460e544844/assets/sun.png -------------------------------------------------------------------------------- /css/fdback.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: 'Quicksand', sans-serif; 6 | } 7 | 8 | body{ 9 | height: 100vh; 10 | width: 100%; 11 | } 12 | 13 | .container{ 14 | position: relative; 15 | width: 100%; 16 | height: 100%; 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | padding: 20px 100px; 21 | } 22 | 23 | .container:after{ 24 | content: ''; 25 | position: absolute; 26 | width: 100%; 27 | height: 100%; 28 | left: 0; 29 | top: 0; 30 | background: url("https://images.unsplash.com/photo-1454779132693-e5cd0a216ed3?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat center; 31 | background-size: cover; 32 | filter: blur(50px); 33 | z-index: -1; 34 | } 35 | .contact-box{ 36 | max-width: 850px; 37 | display: grid; 38 | grid-template-columns: repeat(2, 1fr); 39 | justify-content: center; 40 | align-items: center; 41 | text-align: center; 42 | background-color: #fff; 43 | box-shadow: 0px 0px 19px 5px rgba(0,0,0,0.19); 44 | } 45 | 46 | .left{ 47 | background: url("https://images.unsplash.com/photo-1454779132693-e5cd0a216ed3?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat center; 48 | background-size: cover; 49 | height: 100%; 50 | } 51 | 52 | .right{ 53 | padding: 25px 40px; 54 | } 55 | 56 | h2{ 57 | position: relative; 58 | padding: 0 0 10px; 59 | margin-bottom: 10px; 60 | } 61 | 62 | h2:after{ 63 | content: ''; 64 | position: absolute; 65 | left: 50%; 66 | bottom: 0; 67 | transform: translateX(-50%); 68 | height: 4px; 69 | width: 50px; 70 | border-radius: 2px; 71 | background-color: #1f3abeef; 72 | } 73 | 74 | .field{ 75 | width: 100%; 76 | border: 2px solid rgba(0, 0, 0, 0); 77 | outline: none; 78 | background-color: #cdcfdf; 79 | padding: 0.5rem 1rem; 80 | font-size: 1.1rem; 81 | margin-bottom: 22px; 82 | transition: .3s; 83 | } 84 | 85 | .field:hover{ 86 | background-color: rgba(227, 232, 234, 0.685); 87 | } 88 | 89 | textarea{ 90 | min-height: 150px; 91 | } 92 | 93 | /* .btn{ 94 | width: 100%; 95 | padding: 0.5rem 1rem; 96 | background-color: #0d31a8; 97 | color: #15110efe; 98 | font-size: 1.1rem; 99 | border: none; 100 | outline: none; 101 | cursor: pointer; 102 | transition: .3s; 103 | } 104 | 105 | .btn:hover{ 106 | background-color: #205eef; 107 | } */ 108 | 109 | .btn { 110 | /* display: inline-block; 111 | padding: 15px 30px; 112 | background-color: #205eef; 113 | color: #fff; 114 | font-size: 1.2rem; 115 | border: 2px solid #205eef; 116 | border-radius: 25px; 117 | outline: none; 118 | cursor: pointer; 119 | position: relative; 120 | overflow: hidden; 121 | transition: background-color 0.3s, color 0.3s; */ 122 | align-items: center; 123 | background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB); 124 | border: 0; 125 | border-radius: 8px; 126 | box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px; 127 | box-sizing: border-box; 128 | color: #FFFFFF; 129 | display: flex; 130 | font-family: Phantomsans, sans-serif; 131 | font-size: 20px; 132 | justify-content: center; 133 | line-height: 1em; 134 | max-width: 100%; 135 | min-width: 140px; 136 | padding: 3px; 137 | text-decoration: none; 138 | user-select: none; 139 | -webkit-user-select: none; 140 | touch-action: manipulation; 141 | white-space: nowrap; 142 | cursor: pointer; 143 | margin-left: 110px; 144 | } 145 | 146 | .btn:before { 147 | content: ''; 148 | position: absolute; 149 | top: 50%; 150 | left: 50%; 151 | transform: translate(-50%, -50%); 152 | width: 0; 153 | height: 0; 154 | background-color: rgba(255, 255, 255, 0.1); 155 | border-radius: 50%; 156 | opacity: 0; 157 | transition: width 0.3s, height 0.3s, opacity 0.3s; 158 | } 159 | 160 | .btn:hover { 161 | background-color: #15110efe; 162 | color: #fff; 163 | } 164 | 165 | .btn:hover:before { 166 | width: 200%; 167 | height: 500%; 168 | opacity: 1; 169 | } 170 | 171 | 172 | .field:focus{ 173 | border: 2px solid rgba(35, 129, 229, 0.638); 174 | background-color: #ebe4ec88; 175 | } 176 | 177 | @media screen and (max-width: 880px){ 178 | .contact-box{ 179 | grid-template-columns: 1fr; 180 | } 181 | .left{ 182 | height: 200px; 183 | } 184 | } 185 | 186 | /* footer { 187 | background-color: inherit; 188 | color: #FFFFFF; 189 | padding: 20px; 190 | position: fixed; 191 | bottom: 0; 192 | width: 100%; 193 | text-align: left; 194 | margin-left: 500px; 195 | 196 | } 197 | 198 | .social-icons a { 199 | display: inline-block; 200 | margin: 0 10px; 201 | margin-left: 300px; 202 | margin-bottom: 30px; 203 | } 204 | 205 | .social-icons img { 206 | width: 30px; 207 | height: auto; 208 | margin-left: -500px; 209 | } */ 210 | 211 | footer { 212 | background-color: transparent; 213 | 214 | color: #182794; 215 | padding: 20px; 216 | position: fixed; 217 | bottom: -16px; 218 | width: 100%; 219 | text-align: center; 220 | margin: 0 auto; 221 | } 222 | .social-icons { 223 | display: flex; /* or display: grid; */ 224 | justify-content: center; /* or other alignment properties based on your preference */ 225 | margin-bottom: 30px; 226 | } 227 | 228 | .social-icons a { 229 | display: inline-block; 230 | margin: 0 15px; /* Adjust the margin as needed */ 231 | } 232 | 233 | .social-icons img { 234 | 235 | width: 30px; 236 | height: auto; 237 | } 238 | .social-icons a { 239 | display: inline-block; 240 | margin: 0 10px; /* Adjust the margin as needed */ 241 | transition: transform 0.3s; 242 | } 243 | 244 | .social-icons a:hover { 245 | transform: translateY(-4px); 246 | } 247 | -------------------------------------------------------------------------------- /css/rateUs.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .main-container { 8 | height: 100vh; 9 | width: 100vw; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | background: rgb(2, 0, 36); 14 | background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%); 15 | } 16 | 17 | .outer-container { 18 | height: auto; 19 | width: auto; 20 | padding: 3rem; 21 | background: #ffb347; 22 | background: -webkit-linear-gradient(to right, #ffcc33, #ffb347); 23 | background: linear-gradient(to right, #ffcc33, #ffb347); 24 | display: flex; 25 | justify-content: center; 26 | align-items: center; 27 | } 28 | 29 | .inner-container { 30 | height: 40vh; 31 | width: auto; 32 | background-color: #fff; 33 | display: flex; 34 | flex-direction: column; 35 | justify-content: center; 36 | align-items: center; 37 | padding: 1rem 2rem; 38 | gap: 2rem; 39 | } 40 | 41 | .emoji-section { 42 | display: flex; 43 | justify-content: flex-end; 44 | align-items: center; 45 | /* width: 100%; */ 46 | align-self: flex-end; 47 | gap: 2rem; 48 | } 49 | 50 | .emoji-section div { 51 | font-size: 3rem; 52 | border-radius: 50%; 53 | cursor: pointer; 54 | } 55 | 56 | .rating-section { 57 | display: flex; 58 | justify-content: center; 59 | align-items: center; 60 | align-self: flex-end; 61 | gap: 5.5rem; 62 | } 63 | 64 | 65 | .rating-section div { 66 | font-size: 2rem; 67 | cursor: pointer; 68 | border-radius: 50%; 69 | } 70 | 71 | .rating-description { 72 | display: flex; 73 | justify-content: space-between; 74 | align-items: center; 75 | gap: 1rem; 76 | } 77 | 78 | .rating-description>.message { 79 | margin-right: 1.5rem; 80 | } 81 | 82 | .rating-description div { 83 | font-size: 1.2rem; 84 | cursor: pointer; 85 | } 86 | 87 | .submit-section a { 88 | text-decoration: none; 89 | font-size: 2rem; 90 | padding: 0.5rem 1rem; 91 | background-color: gold; 92 | color: black; 93 | border-radius: 10px; 94 | transition: all 0.2s ease-in-out; 95 | } 96 | 97 | .submit-section a:hover { 98 | background-color: rgb(254, 221, 36); 99 | transition: all 0.2s ease-in-out; 100 | } 101 | 102 | .submit-section { 103 | margin-bottom: 1rem; 104 | align-self: flex-end; 105 | transition: all 0.2s ease-in-out; 106 | } -------------------------------------------------------------------------------- /daksh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swarnade/webdesign-switch/1e10060c3f8dac9825731ad6700bc5460e544844/daksh.jpg -------------------------------------------------------------------------------- /design_button/ASIF-MANDAL.css: -------------------------------------------------------------------------------- 1 | /* Button by ASIF-MANDAL CSS */ 2 | #ASIF-MANDAL { 3 | align-items: center; 4 | appearance: none; 5 | background-color: #FCFCFD; 6 | border-radius: 4px; 7 | border-width: 0; 8 | box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset; 9 | box-sizing: border-box; 10 | color: #36395A; 11 | cursor: pointer; 12 | display: inline-flex; 13 | font-family: "JetBrains Mono",monospace; 14 | height: 48px; 15 | justify-content: center; 16 | line-height: 1; 17 | list-style: none; 18 | overflow: hidden; 19 | padding-left: 16px; 20 | padding-right: 16px; 21 | position: relative; 22 | text-align: left; 23 | text-decoration: none; 24 | transition: box-shadow .15s,transform .15s; 25 | user-select: none; 26 | -webkit-user-select: none; 27 | touch-action: manipulation; 28 | white-space: nowrap; 29 | will-change: box-shadow,transform; 30 | font-size: 18px; 31 | } 32 | 33 | #ASIF-MANDAL:focus { 34 | box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset; 35 | } 36 | 37 | #ASIF-MANDAL:hover { 38 | box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset; 39 | transform: translateY(-2px); 40 | } 41 | 42 | #ASIF-MANDAL:active { 43 | box-shadow: #D6D6E7 0 3px 7px inset; 44 | transform: translateY(2px); 45 | } -------------------------------------------------------------------------------- /design_button/AftabShare.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .aftab { 4 | width: 270px; 5 | height: 60px; 6 | border: none; 7 | background: #ffe4c4; 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | position: relative; 12 | } 13 | 14 | .aftab:before { 15 | content: ""; 16 | position: absolute; 17 | width: 0; 18 | height: 3px; 19 | background-color: #000; 20 | top: 0; 21 | left: 0; 22 | transition: width 1s ease-in-out; 23 | } 24 | 25 | .aftab:after { 26 | content: ""; 27 | position: absolute; 28 | width: 0; 29 | height: 3px; 30 | background-color: #000; 31 | bottom: 0; 32 | right: 0; 33 | transition: width 1s ease-in-out; 34 | } 35 | 36 | .aftab:hover:before, 37 | .aftab:hover:after { 38 | width: 100%; 39 | } 40 | 41 | .letters { 42 | width: 50px; 43 | height: 50px; 44 | perspective: 600px; 45 | } 46 | 47 | .card { 48 | width: 100%; 49 | height: 100%; 50 | position: relative; 51 | transition: transform 1s ease-in-out; 52 | transform-style: preserve-3d; 53 | } 54 | 55 | .card_face { 56 | position: absolute; 57 | height: 100%; 58 | width: 100%; 59 | backface-visibility: hidden; 60 | font-size: 28px; 61 | display: flex; 62 | align-items: center; 63 | justify-content: center; 64 | cursor: pointer; 65 | font-weight: 600; 66 | } 67 | 68 | .back { 69 | transform: rotateY(180deg); 70 | } 71 | 72 | .aftab:hover .card { 73 | transform: rotateY(180deg); 74 | } -------------------------------------------------------------------------------- /design_button/Anjalikumari123456.css: -------------------------------------------------------------------------------- 1 | #Anjalikumari123456 { 2 | align-items: center; 3 | margin-left: 60px; 4 | background-image: linear-gradient(144deg, #ddfff7, #93E1D8 50%, #FFA69E); 5 | border: 5px; 6 | border-radius: 8px; 7 | box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px; 8 | box-sizing: border-box; 9 | color: #1a1111; 10 | display: flex; 11 | font-family: Phantomsans, sans-serif; 12 | font-size: 20px; 13 | justify-content: center; 14 | line-height: 1em; 15 | text-decoration: none; 16 | user-select: none; 17 | -webkit-user-select: none; 18 | touch-action: manipulation; 19 | white-space: nowrap; 20 | cursor: pointer; 21 | height: 40px; 22 | width: 100px; 23 | border: none; 24 | transition: color 0.3s ease-in-out, background 0.3s ease-in-out; 25 | animation: pulse 1.5s infinite alternate; 26 | } 27 | 28 | #Anjalikumari123456:hover { 29 | color: rgb(158, 158, 28); 30 | background: linear-gradient(68.6deg, rgb(252, 165, 241) 1.8%, rgb(181, 255, 255) 100.5%); 31 | 32 | } 33 | 34 | @keyframes pulse { 35 | from { 36 | transform: scale(1); 37 | } 38 | to { 39 | transform: scale(1.1); 40 | } 41 | } 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /design_button/RatnojitSaha-1.css: -------------------------------------------------------------------------------- 1 | .ratnojit1 { 2 | padding: 0.6em 2em; 3 | border: none; 4 | outline: none; 5 | color: rgb(255, 255, 255); 6 | background: #111; 7 | cursor: pointer; 8 | position: relative; 9 | z-index: 0; 10 | border-radius: 10px; 11 | } 12 | 13 | .ratnojit1:before { 14 | content: ""; 15 | background: linear-gradient( 16 | 45deg,#ff0000,#ff7300,#fffb00,#48ff00,#00ffd5,#002bff,#7a00ff,#ff00c8,#ff0000 17 | ); 18 | position: absolute; 19 | top: -2px; 20 | left: -2px; 21 | background-size: 400%; 22 | z-index: -1; 23 | filter: blur(5px); 24 | width: calc(100% + 4px); 25 | height: calc(100% + 4px); 26 | animation: glowingratnojit1 20s linear infinite; 27 | opacity: 0; 28 | transition: opacity 0.3s ease-in-out; 29 | border-radius: 10px; 30 | } 31 | 32 | @keyframes glowingratnojit1 { 33 | 0% { 34 | background-position: 0 0; 35 | } 36 | 50% { 37 | background-position: 400% 0; 38 | } 39 | 100% { 40 | background-position: 0 0; 41 | } 42 | } 43 | 44 | .ratnojit1:active { 45 | color: #000; 46 | } 47 | 48 | .ratnojit1:active:after { 49 | background: transparent; 50 | } 51 | 52 | .ratnojit1:hover:before { 53 | opacity: 1; 54 | } 55 | 56 | .ratnojit1:after { 57 | z-index: -1; 58 | content: ""; 59 | position: absolute; 60 | width: 100%; 61 | height: 100%; 62 | background: #191919; 63 | left: 0; 64 | top: 0; 65 | border-radius: 10px; 66 | } -------------------------------------------------------------------------------- /design_button/RatnojitSaha-10.css: -------------------------------------------------------------------------------- 1 | #ratnojit10 { 2 | background-color: #b81515; 3 | padding: 7px; 4 | width: 110px; 5 | font-family: Verdana, Geneva, Tahoma, sans-serif; 6 | color: white; 7 | animation: bn53bounce 2s infinite; 8 | cursor: pointer; 9 | outline: solid white; 10 | border: none; 11 | } 12 | 13 | @keyframes bn53bounce { 14 | 5%, 15 | 50% { 16 | transform: scale(1); 17 | } 18 | 19 | 10% { 20 | transform: scale(1); 21 | } 22 | 23 | 15% { 24 | transform: scale(1); 25 | } 26 | 27 | 20% { 28 | transform: scale(1) rotate(-5deg); 29 | } 30 | 31 | 25% { 32 | transform: scale(1) rotate(5deg); 33 | } 34 | 35 | 30% { 36 | transform: scale(1) rotate(-3deg); 37 | } 38 | 39 | 35% { 40 | transform: scale(1) rotate(2deg); 41 | } 42 | 43 | 40% { 44 | transform: scale(1) rotate(0); 45 | } 46 | } -------------------------------------------------------------------------------- /design_button/RatnojitSaha-11.css: -------------------------------------------------------------------------------- 1 | /* CSS */ 2 | .button-1 { 3 | align-self: center; 4 | background-color: #fff; 5 | background-image: none; 6 | background-position: 0 90%; 7 | background-repeat: repeat no-repeat; 8 | background-size: 4px 3px; 9 | border-radius: 15px 225px 255px 15px 15px 255px 225px 15px; 10 | border-style: solid; 11 | border-width: 2px; 12 | box-shadow: rgb(240, 90, 90) 15px 28px 25px -18px; 13 | box-sizing: border-box; 14 | color: #41403e; 15 | cursor: pointer; 16 | display: inline-block; 17 | font-family: Neucha, sans-serif; 18 | font-size: 1rem; 19 | line-height: 23px; 20 | outline: none; 21 | padding: .75rem; 22 | text-decoration: none; 23 | transition: all 235ms ease-in-out; 24 | border-bottom-left-radius: 15px 255px; 25 | border-bottom-right-radius: 225px 15px; 26 | border-top-left-radius: 255px 15px; 27 | border-top-right-radius: 15px 225px; 28 | user-select: none; 29 | -webkit-user-select: none; 30 | touch-action: manipulation; 31 | } 32 | 33 | .button-1:hover { 34 | box-shadow: rgba(197, 16, 16, 0.699) 2px 8px 8px -5px; 35 | transform: translate3d(0, 2px, 0); 36 | } 37 | 38 | .button-1:focus { 39 | box-shadow: rgba(192, 42, 42, 0.79) 2px 8px 4px -6px; 40 | } -------------------------------------------------------------------------------- /design_button/RatnojitSaha-12.css: -------------------------------------------------------------------------------- 1 | .button-2 { 2 | position: relative; 3 | display: inline-block; 4 | padding: 15px 30px; 5 | text-align: center; 6 | font-size: 18px; 7 | letter-spacing: 1px; 8 | text-decoration: none; 9 | color: #725AC1; 10 | background: transparent; 11 | cursor: pointer; 12 | transition: ease-out 0.5s; 13 | border: 2px solid #725AC1; 14 | border-radius: 10px; 15 | box-shadow: inset 0 0 0 0 #725AC1; 16 | } 17 | 18 | .button-2:hover { 19 | color: white; 20 | box-shadow: inset 0 -100px 0 0 #725AC1; 21 | } 22 | 23 | .button-2:active { 24 | transform: scale(0.9); 25 | } -------------------------------------------------------------------------------- /design_button/RatnojitSaha-13.css: -------------------------------------------------------------------------------- 1 | .button-3 { 2 | background: transparent; 3 | color: #fff; 4 | font-size: 17px; 5 | text-transform: uppercase; 6 | font-weight: 600; 7 | border: none; 8 | padding: 20px 30px; 9 | perspective: 30rem; 10 | border-radius: 10px; 11 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.308); 12 | } 13 | 14 | .button-3::before { 15 | content: ''; 16 | display: block; 17 | position: absolute; 18 | width: 100%; 19 | height: 100%; 20 | top: 0; 21 | left: 0; 22 | border-radius: 10px; 23 | background: linear-gradient(320deg, rgba(0, 140, 255, 0.678), rgba(128, 0, 128, 0.308)); 24 | z-index: 1; 25 | transition: background 3s; 26 | } 27 | 28 | .button-3:hover::before { 29 | animation: rotate 1s; 30 | transition: all .5s; 31 | } 32 | 33 | @keyframes rotate { 34 | 0% { 35 | transform: rotateY(180deg); 36 | } 37 | 38 | 100% { 39 | transform: rotateY(360deg); 40 | } 41 | } -------------------------------------------------------------------------------- /design_button/RatnojitSaha-14.css: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | display: inline-flex; 3 | list-style: none; 4 | height: 48px; 5 | width: 100%; 6 | padding-top: 7px; 7 | padding-bottom: 5px; 8 | font-family: "Poppins", sans-serif; 9 | justify-content: center; 10 | } 11 | 12 | .wrapper .icon { 13 | position: relative; 14 | background: #fff; 15 | border-radius: 50%; 16 | margin: 10px; 17 | width: 50px; 18 | height: 50px; 19 | font-size: 18px; 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | flex-direction: column; 24 | box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); 25 | cursor: pointer; 26 | transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); 27 | } 28 | 29 | .wrapper .tooltip { 30 | position: absolute; 31 | top: 0; 32 | font-size: 14px; 33 | background: #fff; 34 | color: #fff; 35 | padding: 5px 8px; 36 | border-radius: 5px; 37 | box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); 38 | opacity: 0; 39 | pointer-events: none; 40 | transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); 41 | } 42 | 43 | .wrapper .tooltip::before { 44 | position: absolute; 45 | content: ""; 46 | height: 8px; 47 | width: 8px; 48 | background: #fff; 49 | bottom: -3px; 50 | left: 50%; 51 | transform: translate(-50%) rotate(45deg); 52 | transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); 53 | } 54 | 55 | .wrapper .icon:hover .tooltip { 56 | top: -45px; 57 | opacity: 1; 58 | visibility: visible; 59 | pointer-events: auto; 60 | } 61 | 62 | .wrapper .icon:hover span, 63 | .wrapper .icon:hover .tooltip { 64 | text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); 65 | } 66 | 67 | .wrapper .facebook:hover, 68 | .wrapper .facebook:hover .tooltip, 69 | .wrapper .facebook:hover .tooltip::before { 70 | background: #1877F2; 71 | color: #fff; 72 | } 73 | 74 | .wrapper .twitter:hover, 75 | .wrapper .twitter:hover .tooltip, 76 | .wrapper .twitter:hover .tooltip::before { 77 | background: #1DA1F2; 78 | color: #fff; 79 | } 80 | 81 | .wrapper .instagram:hover, 82 | .wrapper .instagram:hover .tooltip, 83 | .wrapper .instagram:hover .tooltip::before { 84 | background: #E4405F; 85 | color: #fff; 86 | } 87 | 88 | -------------------------------------------------------------------------------- /design_button/RatnojitSaha-15.css: -------------------------------------------------------------------------------- 1 | .button-5 { 2 | height: 50px; 3 | width: 150px; 4 | border: none; 5 | border-radius: 10px; 6 | cursor: pointer; 7 | position: relative; 8 | overflow: hidden; 9 | transition: all 0.5s ease-in-out; 10 | } 11 | 12 | .button-5:hover { 13 | box-shadow: .5px .5px 150px #252525; 14 | } 15 | 16 | .type1::after { 17 | content: "Thanks"; 18 | height: 50px; 19 | width: 150px; 20 | background-color: #008080; 21 | color: #fff; 22 | position: absolute; 23 | top: 0%; 24 | left: 0%; 25 | transform: translateY(50px); 26 | font-size: 1.2rem; 27 | font-weight: 600; 28 | display: flex; 29 | align-items: center; 30 | justify-content: center; 31 | transition: all 0.5s ease-in-out; 32 | } 33 | 34 | .type1::before { 35 | content: "Hover Me"; 36 | height: 50px; 37 | width: 150px; 38 | background-color: #fff; 39 | color: #008080; 40 | position: absolute; 41 | top: 0%; 42 | left: 0%; 43 | transform: translateY(0px) scale(1.2); 44 | font-size: 1.2rem; 45 | font-weight: 600; 46 | display: flex; 47 | align-items: center; 48 | justify-content: center; 49 | transition: all 0.5s ease-in-out; 50 | } 51 | 52 | .type1:hover::after { 53 | transform: translateY(0) scale(1.2); 54 | } 55 | 56 | .type1:hover::before { 57 | transform: translateY(-50px) scale(0) rotate(120deg); 58 | } -------------------------------------------------------------------------------- /design_button/RatnojitSaha-16.css: -------------------------------------------------------------------------------- 1 | #type{ 2 | padding: 15px 30px; 3 | font-size: 18px; 4 | outline: none; 5 | border: none; 6 | border-radius: 10px; 7 | transition: 0.5s; 8 | background: #1e1e1e; 9 | cursor: pointer; 10 | color: greenyellow; 11 | box-shadow: 0 0 10px #363636, inset 0 0 10px #363636; 12 | } 13 | 14 | #type:hover { 15 | animation: a 0.5s 1 linear; 16 | } 17 | 18 | @keyframes a { 19 | 0% { 20 | transform: scale(0.7, 1.3); 21 | } 22 | 23 | 25% { 24 | transform: scale(1.3, 0.7); 25 | } 26 | 27 | 50% { 28 | transform: scale(0.7, 1.3); 29 | } 30 | 31 | 75% { 32 | transform: scale(1.3, 0.7); 33 | } 34 | 35 | 100% { 36 | transform: scale(1, 1); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /design_button/RatnojitSaha-17.css: -------------------------------------------------------------------------------- 1 | .btn17 { 2 | --color: #00A97F; 3 | --color2: rgb(10, 25, 30); 4 | padding: 0.8em 1.75em; 5 | background-color: transparent; 6 | border-radius: 6px; 7 | border: .3px solid var(--color); 8 | transition: .5s; 9 | position: relative; 10 | overflow: hidden; 11 | cursor: pointer; 12 | z-index: 1; 13 | font-weight: 300; 14 | font-size: 17px; 15 | font-family: 'Roboto', 'Segoe UI', sans-serif; 16 | text-transform: uppercase; 17 | color: var(--color); 18 | } 19 | 20 | .btn1717::after, .btn17::before { 21 | content: ''; 22 | display: block; 23 | height: 100%; 24 | width: 100%; 25 | transform: skew(90deg) translate(-50%, -50%); 26 | position: absolute; 27 | inset: 50%; 28 | left: 25%; 29 | z-index: -1; 30 | transition: .5s ease-out; 31 | background-color: var(--color); 32 | } 33 | 34 | .btn17::before { 35 | top: -50%; 36 | left: -25%; 37 | transform: skew(90deg) rotate(180deg) translate(-50%, -50%); 38 | } 39 | 40 | .btn17:hover::before { 41 | transform: skew(45deg) rotate(180deg) translate(-50%, -50%); 42 | } 43 | 44 | .btn17:hover::after { 45 | transform: skew(45deg) translate(-50%, -50%); 46 | } 47 | 48 | .btn17:hover { 49 | color: var(--color2); 50 | } 51 | 52 | .btn17:active { 53 | filter: brightness(.7); 54 | transform: scale(.98); 55 | } -------------------------------------------------------------------------------- /design_button/RatnojitSaha-18.css: -------------------------------------------------------------------------------- 1 | .btn-18, 2 | .btn-18 *, 3 | .btn-18 :after, 4 | .btn-18 :before, 5 | .btn-18:after, 6 | .btn-18:before { 7 | border: 0 solid; 8 | box-sizing: border-box; 9 | } 10 | 11 | .btn-18 { 12 | -webkit-tap-highlight-color: transparent; 13 | -webkit-appearance: button; 14 | background-color: #000; 15 | background-image: none; 16 | color: #fff; 17 | cursor: pointer; 18 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 19 | Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, 20 | Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; 21 | font-size: 100%; 22 | font-weight: 900; 23 | line-height: 1.5; 24 | margin: 0; 25 | -webkit-mask-image: -webkit-radial-gradient(#000, #fff); 26 | padding: 0; 27 | text-transform: uppercase; 28 | } 29 | 30 | .btn-18:disabled { 31 | cursor: default; 32 | } 33 | 34 | .btn-18:-moz-focusring { 35 | outline: auto; 36 | } 37 | 38 | .btn-18 svg { 39 | display: block; 40 | vertical-align: middle; 41 | } 42 | 43 | .btn-18 [hidden] { 44 | display: none; 45 | } 46 | 47 | .btn-18 { 48 | border-radius: 99rem; 49 | border-width: 2px; 50 | padding: 0.8rem 3rem; 51 | z-index: 0; 52 | } 53 | 54 | .btn-18, 55 | .btn-18 .text-container { 56 | overflow: hidden; 57 | position: relative; 58 | } 59 | 60 | .btn-18 .text-container { 61 | display: block; 62 | mix-blend-mode: difference; 63 | } 64 | 65 | .btn-18 .text { 66 | display: block; 67 | position: relative; 68 | } 69 | 70 | .btn-18:hover .text { 71 | -webkit-animation: move-up-alternate 0.3s forwards; 72 | animation: move-up-alternate 0.3s forwards; 73 | } 74 | 75 | @-webkit-keyframes move-up-alternate { 76 | 0% { 77 | transform: translateY(0); 78 | } 79 | 80 | 50% { 81 | transform: translateY(80%); 82 | } 83 | 84 | 51% { 85 | transform: translateY(-80%); 86 | } 87 | 88 | to { 89 | transform: translateY(0); 90 | } 91 | } 92 | 93 | @keyframes move-up-alternate { 94 | 0% { 95 | transform: translateY(0); 96 | } 97 | 98 | 50% { 99 | transform: translateY(80%); 100 | } 101 | 102 | 51% { 103 | transform: translateY(-80%); 104 | } 105 | 106 | to { 107 | transform: translateY(0); 108 | } 109 | } 110 | 111 | .btn-18:after, 112 | .btn-18:before { 113 | --skew: 0.2; 114 | background: #fff; 115 | content: ""; 116 | display: block; 117 | height: 102%; 118 | left: calc(-50% - 50% * var(--skew)); 119 | pointer-events: none; 120 | position: absolute; 121 | top: -104%; 122 | transform: skew(calc(150deg * var(--skew))) translateY(var(--progress, 0)); 123 | transition: transform 0.2s ease; 124 | width: 100%; 125 | } 126 | 127 | .btn-18:after { 128 | --progress: 0%; 129 | left: calc(50% + 50% * var(--skew)); 130 | top: 102%; 131 | z-index: -1; 132 | } 133 | 134 | .btn-18:hover:before { 135 | --progress: 100%; 136 | } 137 | 138 | .btn-18:hover:after { 139 | --progress: -102%; 140 | } 141 | -------------------------------------------------------------------------------- /design_button/RatnojitSaha-19.css: -------------------------------------------------------------------------------- 1 | .btn19 { 2 | height: 4em; 3 | width: 12em; 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | background: transparent; 8 | border: 0px solid black; 9 | cursor: pointer; 10 | } 11 | 12 | .wrapper19 { 13 | height: 2em; 14 | width: 8em; 15 | position: relative; 16 | background: transparent; 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | } 21 | 22 | .text19 { 23 | font-size: 17px; 24 | z-index: 1; 25 | color: #000; 26 | padding: 4px 12px; 27 | border-radius: 4px; 28 | background: rgba(255, 255, 255, 0.7); 29 | transition: all 0.5s ease; 30 | } 31 | 32 | .flowe { 33 | display: grid; 34 | grid-template-columns: 1em 1em; 35 | position: absolute; 36 | transition: grid-template-columns 0.8s ease; 37 | } 38 | 39 | .flowe1 { 40 | top: -12px; 41 | left: -13px; 42 | transform: rotate(5deg); 43 | } 44 | 45 | .flowe2 { 46 | bottom: -5px; 47 | left: 8px; 48 | transform: rotate(35deg); 49 | } 50 | 51 | .flowe3 { 52 | bottom: -15px; 53 | transform: rotate(0deg); 54 | } 55 | 56 | .flowe4 { 57 | top: -14px; 58 | transform: rotate(15deg); 59 | } 60 | 61 | .flowe5 { 62 | right: 11px; 63 | top: -3px; 64 | transform: rotate(25deg); 65 | } 66 | 67 | .flowe6 { 68 | right: -15px; 69 | bottom: -15px; 70 | transform: rotate(30deg); 71 | } 72 | 73 | .petal { 74 | height: 1em; 75 | width: 1em; 76 | border-radius: 40% 70% / 7% 90%; 77 | background: linear-gradient(#07a6d7, #93e0ee); 78 | border: 0.5px solid #96d1ec; 79 | z-index: 0; 80 | transition: width 0.8s ease, height 0.8s ease; 81 | } 82 | 83 | .two { 84 | transform: rotate(90deg); 85 | } 86 | 87 | .three { 88 | transform: rotate(270deg); 89 | } 90 | 91 | .four { 92 | transform: rotate(180deg); 93 | } 94 | 95 | .btn19:hover .petal { 96 | background: linear-gradient(#0761d7, #93bdee); 97 | border: 0.5px solid #96b4ec; 98 | } 99 | 100 | .btn19:hover .flowe { 101 | grid-template-columns: 1.5em 1.5em; 102 | } 103 | 104 | .btn19:hover .flowe .petal { 105 | width: 1em; 106 | height: 1em; 107 | } 108 | 109 | .btn19:hover .text { 110 | background: rgba(255, 255, 255, 0.4); 111 | } 112 | 113 | .btn19:hover div.flowe1 { 114 | animation: 15s linear 0s normal none infinite running flowe1; 115 | } 116 | 117 | @keyframes flowe1 { 118 | 0% { 119 | transform: rotate(5deg); 120 | } 121 | 122 | 100% { 123 | transform: rotate(365deg); 124 | } 125 | } 126 | 127 | .btn19:hover div.flowe2 { 128 | animation: 13s linear 1s normal none infinite running flowe2; 129 | } 130 | 131 | @keyframes flowe2 { 132 | 0% { 133 | transform: rotate(35deg); 134 | } 135 | 136 | 100% { 137 | transform: rotate(-325deg); 138 | } 139 | } 140 | 141 | .btn19:hover div.flowe3 { 142 | animation: 16s linear 1s normal none infinite running flowe3; 143 | } 144 | 145 | @keyframes flowe3 { 146 | 0% { 147 | transform: rotate(0deg); 148 | } 149 | 150 | 100% { 151 | transform: rotate(360deg); 152 | } 153 | } 154 | 155 | .btn19:hover div.flowe4 { 156 | animation: 17s linear 1s normal none infinite running flowe4; 157 | } 158 | 159 | @keyframes flowe4 { 160 | 0% { 161 | transform: rotate(15deg); 162 | } 163 | 164 | 100% { 165 | transform: rotate(375deg); 166 | } 167 | } 168 | 169 | .btn19:hover div.flowe5 { 170 | animation: 20s linear 1s normal none infinite running flowe5; 171 | } 172 | 173 | @keyframes flowe5 { 174 | 0% { 175 | transform: rotate(25deg); 176 | } 177 | 178 | 100% { 179 | transform: rotate(-335deg); 180 | } 181 | } 182 | 183 | .btn19:hover div.flowe6 { 184 | animation: 15s linear 1s normal none infinite running flowe6; 185 | } 186 | 187 | @keyframes flowe6 { 188 | 0% { 189 | transform: rotate(30deg); 190 | } 191 | 192 | 100% { 193 | transform: rotate(390deg); 194 | } 195 | } 196 | -------------------------------------------------------------------------------- /design_button/RatnojitSaha-2.css: -------------------------------------------------------------------------------- 1 | #ratnojit2 { 2 | border: none; 3 | padding: 0.8em 2.5em; 4 | outline: none; 5 | color: white; 6 | font-style: 1.2em; 7 | position: relative; 8 | z-index: 1; 9 | cursor: pointer; 10 | background: none; 11 | text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.45); 12 | } 13 | 14 | #ratnojit2:before, 15 | #ratnojit2:after { 16 | position: absolute; 17 | top: 50%; 18 | left: 50%; 19 | border-radius: 10em; 20 | -webkit-transform: translateX(-50%) translateY(-50%); 21 | transform: translateX(-50%) translateY(-50%); 22 | width: 105%; 23 | height: 105%; 24 | content: ""; 25 | z-index: -2; 26 | background-size: 400% 400%; 27 | background: linear-gradient( 28 | 60deg, 29 | #f79533, 30 | #f37055, 31 | #ef4e7b, 32 | #a166ab, 33 | #5073b8, 34 | #1098ad, 35 | #07b39b, 36 | #6fba82 37 | ); 38 | } 39 | 40 | #ratnojit2:before { 41 | -webkit-filter: blur(7px); 42 | filter: blur(7px); 43 | -webkit-transition: all 0.25s ease; 44 | transition: all 0.25s ease; 45 | -webkit-animation: pulse 10s infinite ease; 46 | animation: pulse 10s infinite ease; 47 | } 48 | 49 | #ratnojit2:after { 50 | -webkit-filter: blur(0.3px); 51 | filter: blur(0.3px); 52 | } 53 | 54 | #ratnojit2:hover:before { 55 | width: 115%; 56 | height: 115%; 57 | } -------------------------------------------------------------------------------- /design_button/RatnojitSaha-20.css: -------------------------------------------------------------------------------- 1 | button { 2 | position: relative; 3 | display: inline-block; 4 | cursor: pointer; 5 | outline: none; 6 | border: 0; 7 | vertical-align: middle; 8 | text-decoration: none; 9 | background: transparent; 10 | padding: 0; 11 | font-size: inherit; 12 | font-family: inherit; 13 | } 14 | 15 | button.learn-more { 16 | width: 12rem; 17 | height: auto; 18 | } 19 | 20 | button.learn-more .circle { 21 | transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); 22 | position: relative; 23 | display: block; 24 | margin: 0; 25 | width: 3rem; 26 | height: 3rem; 27 | background: #282936; 28 | border-radius: 1.625rem; 29 | } 30 | 31 | button.learn-more .circle .icon { 32 | transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); 33 | position: absolute; 34 | top: 0; 35 | bottom: 0; 36 | margin: auto; 37 | background: #fff; 38 | } 39 | 40 | button.learn-more .circle .icon.arrow { 41 | transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); 42 | left: 0.625rem; 43 | width: 1.125rem; 44 | height: 0.125rem; 45 | background: none; 46 | } 47 | 48 | button.learn-more .circle .icon.arrow::before { 49 | position: absolute; 50 | content: ""; 51 | top: -0.29rem; 52 | right: 0.0625rem; 53 | width: 0.625rem; 54 | height: 0.625rem; 55 | border-top: 0.125rem solid #fff; 56 | border-right: 0.125rem solid #fff; 57 | transform: rotate(45deg); 58 | } 59 | 60 | button.learn-more .button-text { 61 | transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); 62 | position: absolute; 63 | top: 0; 64 | left: 0; 65 | right: 0; 66 | bottom: 0; 67 | padding: 0.75rem 0; 68 | margin: 0 0 0 1.85rem; 69 | color: #282936; 70 | font-weight: 700; 71 | line-height: 1.6; 72 | text-align: center; 73 | text-transform: uppercase; 74 | } 75 | 76 | button:hover .circle { 77 | width: 100%; 78 | } 79 | 80 | button:hover .circle .icon.arrow { 81 | background: #fff; 82 | transform: translate(1rem, 0); 83 | } 84 | 85 | button:hover .button-text { 86 | color: #fff; 87 | } -------------------------------------------------------------------------------- /design_button/RatnojitSaha-21.css: -------------------------------------------------------------------------------- 1 | .btn21 { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | width: 13rem; 6 | overflow: hidden; 7 | height: 3rem; 8 | background-size: 300% 300%; 9 | backdrop-filter: blur(1rem); 10 | border-radius: 5rem; 11 | transition: 0.5s; 12 | animation: gradient_301 5s ease infinite; 13 | border: double 4px transparent; 14 | background-image: linear-gradient(#212121, #212121), linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%); 15 | background-origin: border-box; 16 | background-clip: content-box, border-box; 17 | } 18 | 19 | #container-stars { 20 | position: absolute; 21 | z-index: -1; 22 | width: 100%; 23 | height: 100%; 24 | overflow: hidden; 25 | transition: 0.5s; 26 | backdrop-filter: blur(1rem); 27 | border-radius: 5rem; 28 | } 29 | 30 | strong { 31 | z-index: 2; 32 | font-family: 'Avalors Personal Use'; 33 | font-size: 12px; 34 | letter-spacing: 5px; 35 | color: #FFFFFF; 36 | text-shadow: 0 0 4px white; 37 | } 38 | 39 | #glow { 40 | position: absolute; 41 | display: flex; 42 | width: 12rem; 43 | } 44 | 45 | .circle { 46 | width: 100%; 47 | height: 30px; 48 | filter: blur(2rem); 49 | animation: pulse_3011 4s infinite; 50 | z-index: -1; 51 | } 52 | 53 | .circle:nth-of-type(1) { 54 | background: rgba(254, 83, 186, 0.636); 55 | } 56 | 57 | .circle:nth-of-type(2) { 58 | background: rgba(142, 81, 234, 0.704); 59 | } 60 | 61 | .btn21:hover #container-stars { 62 | z-index: 1; 63 | background-color: #212121; 64 | } 65 | 66 | .btn21:hover { 67 | transform: scale(1.1) 68 | } 69 | 70 | .btn21:active { 71 | border: double 4px #FE53BB; 72 | background-origin: border-box; 73 | background-clip: content-box, border-box; 74 | animation: none; 75 | } 76 | 77 | .btn21:active .circle { 78 | background: #FE53BB; 79 | } 80 | 81 | #stars { 82 | position: relative; 83 | background: transparent; 84 | width: 200rem; 85 | height: 200rem; 86 | } 87 | 88 | #stars::after { 89 | content: ""; 90 | position: absolute; 91 | top: -10rem; 92 | left: -100rem; 93 | width: 100%; 94 | height: 100%; 95 | animation: animStarRotate 90s linear infinite; 96 | } 97 | 98 | #stars::after { 99 | background-image: radial-gradient(#ffffff 1px, transparent 1%); 100 | background-size: 50px 50px; 101 | } 102 | 103 | #stars::before { 104 | content: ""; 105 | position: absolute; 106 | top: 0; 107 | left: -50%; 108 | width: 170%; 109 | height: 500%; 110 | animation: animStar 60s linear infinite; 111 | } 112 | 113 | #stars::before { 114 | background-image: radial-gradient(#ffffff 1px, transparent 1%); 115 | background-size: 50px 50px; 116 | opacity: 0.5; 117 | } 118 | 119 | @keyframes animStar { 120 | from { 121 | transform: translateY(0); 122 | } 123 | 124 | to { 125 | transform: translateY(-135rem); 126 | } 127 | } 128 | 129 | @keyframes animStarRotate { 130 | from { 131 | transform: rotate(360deg); 132 | } 133 | 134 | to { 135 | transform: rotate(0); 136 | } 137 | } 138 | 139 | @keyframes gradient_301 { 140 | 0% { 141 | background-position: 0% 50%; 142 | } 143 | 144 | 50% { 145 | background-position: 100% 50%; 146 | } 147 | 148 | 100% { 149 | background-position: 0% 50%; 150 | } 151 | } 152 | 153 | @keyframes pulse_3011 { 154 | 0% { 155 | transform: scale(0.75); 156 | box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); 157 | } 158 | 159 | 70% { 160 | transform: scale(1); 161 | box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); 162 | } 163 | 164 | 100% { 165 | transform: scale(0.75); 166 | box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); 167 | } 168 | } -------------------------------------------------------------------------------- /design_button/RatnojitSaha-22.css: -------------------------------------------------------------------------------- 1 | .btn22 { 2 | border: none; 3 | outline: none; 4 | background-color: #6c5ce7; 5 | padding: 10px 20px; 6 | font-size: 12px; 7 | font-weight: 700; 8 | color: #fff; 9 | border-radius: 5px; 10 | transition: all ease 0.1s; 11 | box-shadow: 0px 5px 0px 0px #a29bfe; 12 | } 13 | 14 | .btn22:active { 15 | transform: translateY(5px); 16 | box-shadow: 0px 0px 0px 0px #a29bfe; 17 | } -------------------------------------------------------------------------------- /design_button/RatnojitSaha-23.css: -------------------------------------------------------------------------------- 1 | .shadow__btn { 2 | padding: 10px 20px; 3 | border: none; 4 | font-size: 17px; 5 | color: #fff; 6 | border-radius: 7px; 7 | letter-spacing: 4px; 8 | font-weight: 700; 9 | text-transform: uppercase; 10 | transition: 0.5s; 11 | transition-property: box-shadow; 12 | } 13 | 14 | .shadow__btn { 15 | background: rgb(0,140,255); 16 | box-shadow: 0 0 25px rgb(0,140,255); 17 | } 18 | 19 | .shadow__btn:hover { 20 | box-shadow: 0 0 5px rgb(0,140,255), 21 | 0 0 25px rgb(0,140,255), 22 | 0 0 50px rgb(0,140,255), 23 | 0 0 100px rgb(0,140,255); 24 | } -------------------------------------------------------------------------------- /design_button/RatnojitSaha-24.css: -------------------------------------------------------------------------------- 1 | .button-icon { 2 | display: flex; 3 | border: 3px #fff solid; 4 | width: fit-content; 5 | height: fit-content; 6 | cursor: pointer; 7 | } 8 | 9 | .icon { 10 | background-color: #fff; 11 | padding: 10px 10px 5px 10px; 12 | } 13 | 14 | .icon svg { 15 | width: 25px; 16 | height: 25px; 17 | } 18 | 19 | .cube { 20 | transition: all 0.4s; 21 | transform-style: preserve-3d; 22 | width: 200px; 23 | height: 20px; 24 | } 25 | 26 | .button-icon:hover { 27 | border-color: #ff98a2; 28 | } 29 | 30 | .button-icon:hover .cube { 31 | transform: rotateX(90deg); 32 | } 33 | 34 | .side { 35 | position: absolute; 36 | height: 47px; 37 | width: 200px; 38 | display: flex; 39 | font-size: 0.8em; 40 | justify-content: center; 41 | align-items: center; 42 | text-transform: uppercase; 43 | letter-spacing: 0.5px; 44 | font-weight: bold; 45 | } 46 | 47 | .top { 48 | background: #ff98a2; 49 | color: #fff; 50 | transform: rotateX(-90deg) translate3d(0, 13.5px, 2em); 51 | } 52 | 53 | .front { 54 | background: #222229; 55 | color: #fff; 56 | transform: translate3d(0, 0, 1em); 57 | } 58 | -------------------------------------------------------------------------------- /design_button/RatnojitSaha-25.css: -------------------------------------------------------------------------------- 1 | button { 2 | position: relative; 3 | overflow: hidden; 4 | outline: none; 5 | cursor: pointer; 6 | border-radius: 50px; 7 | background-color: hsl(255deg 50% 40%); 8 | border: solid 4px hsl(50deg 100% 50%); 9 | font-family: inherit; 10 | } 11 | 12 | .default-btn,.hover-btn { 13 | background-color: hsl(255deg 50% 40%); 14 | display: -webkit-box; 15 | display: -moz-box; 16 | display: -ms-flexbox; 17 | display: -webkit-flex; 18 | display: flex; 19 | align-items: center; 20 | gap: 15px; 21 | padding: 15px 20px; 22 | border-radius: 50px; 23 | font-size: 17px; 24 | font-weight: 500; 25 | text-transform: uppercase; 26 | transition: all .3s ease; 27 | } 28 | 29 | .hover-btn { 30 | position: absolute; 31 | inset: 0; 32 | background-color: hsl(255deg 50% 49%); 33 | transform: translate(0%,100%); 34 | } 35 | 36 | .default-btn span { 37 | color: hsl(0, 0%, 100%); 38 | } 39 | 40 | .hover-btn span { 41 | color: hsl(50deg 100% 50%); 42 | } 43 | 44 | button:hover .default-btn { 45 | transform: translate(0%,-100%); 46 | } 47 | 48 | button:hover .hover-btn { 49 | transform: translate(0%,0%); 50 | } -------------------------------------------------------------------------------- /design_button/RatnojitSaha-26.css: -------------------------------------------------------------------------------- 1 | .Btn { 2 | width: 140px; 3 | height: 35px; 4 | display: flex; 5 | align-items: center; 6 | justify-content: flex-start; 7 | border: none; 8 | border-radius: 5px; 9 | overflow: hidden; 10 | box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.089); 11 | cursor: pointer; 12 | background-color: transparent; 13 | } 14 | 15 | .leftContainer { 16 | width: 60%; 17 | height: 100%; 18 | background-color: rgb(238, 0, 0); 19 | display: flex; 20 | align-items: center; 21 | justify-content: center; 22 | gap: 8px; 23 | } 24 | 25 | .leftContainer .like { 26 | color: white; 27 | font-weight: 600; 28 | } 29 | 30 | .likeCount { 31 | width: 40%; 32 | height: 100%; 33 | display: flex; 34 | align-items: center; 35 | justify-content: center; 36 | color: rgb(238, 0, 0); 37 | font-weight: 600; 38 | position: relative; 39 | background-color: white; 40 | } 41 | 42 | .likeCount::before { 43 | height: 8px; 44 | width: 8px; 45 | position: absolute; 46 | content: ""; 47 | background-color: rgb(255, 255, 255); 48 | transform: rotate(45deg); 49 | left: -4px; 50 | } 51 | 52 | .Btn:hover .leftContainer { 53 | background-color: rgb(219, 0, 0); 54 | } 55 | 56 | .Btn:active .leftContainer { 57 | background-color: rgb(201, 0, 0); 58 | } 59 | 60 | .Btn:active .leftContainer svg { 61 | transform: scale(1.15); 62 | transform-origin: top; 63 | } 64 | -------------------------------------------------------------------------------- /design_button/RatnojitSaha-27.css: -------------------------------------------------------------------------------- 1 | .button { 2 | --width: 100px; 3 | --height: 35px; 4 | --tooltip-height: 35px; 5 | --tooltip-width: 90px; 6 | --gap-between-tooltip-to-button: 18px; 7 | --button-color: #222; 8 | --tooltip-color: #fff; 9 | width: var(--width); 10 | height: var(--height); 11 | background: var(--button-color); 12 | position: relative; 13 | text-align: center; 14 | border-radius: 0.45em; 15 | font-family: "Arial"; 16 | transition: background 0.3s; 17 | } 18 | 19 | .button::before { 20 | position: absolute; 21 | content: attr(data-tooltip); 22 | width: var(--tooltip-width); 23 | height: var(--tooltip-height); 24 | background-color: #555; 25 | font-size: 0.9rem; 26 | color: #fff; 27 | border-radius: .25em; 28 | line-height: var(--tooltip-height); 29 | bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) + 10px); 30 | left: calc(50% - var(--tooltip-width) / 2); 31 | } 32 | 33 | .button::after { 34 | position: absolute; 35 | content: ''; 36 | width: 0; 37 | height: 0; 38 | border: 10px solid transparent; 39 | border-top-color: #555; 40 | left: calc(50% - 10px); 41 | bottom: calc(100% + var(--gap-between-tooltip-to-button) - 10px); 42 | } 43 | 44 | .button::after,.button::before { 45 | opacity: 0; 46 | visibility: hidden; 47 | transition: all 0.5s; 48 | } 49 | 50 | .text { 51 | display: flex; 52 | align-items: center; 53 | justify-content: center; 54 | } 55 | 56 | .button-wrapper,.text,.icon { 57 | overflow: hidden; 58 | position: absolute; 59 | width: 100%; 60 | height: 100%; 61 | left: 0; 62 | color: #fff; 63 | } 64 | 65 | .text { 66 | top: 0 67 | } 68 | 69 | .text,.icon { 70 | transition: top 0.5s; 71 | } 72 | 73 | .icon { 74 | color: #fff; 75 | top: 100%; 76 | display: flex; 77 | align-items: center; 78 | justify-content: center; 79 | } 80 | 81 | .icon svg { 82 | width: 24px; 83 | height: 24px; 84 | } 85 | 86 | .button:hover { 87 | background: #222; 88 | } 89 | 90 | .button:hover .text { 91 | top: -100%; 92 | } 93 | 94 | .button:hover .icon { 95 | top: 0; 96 | } 97 | 98 | .button:hover:before,.button:hover:after { 99 | opacity: 1; 100 | visibility: visible; 101 | } 102 | 103 | .button:hover:after { 104 | bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) - 20px); 105 | } 106 | 107 | .button:hover:before { 108 | bottom: calc(var(--height) + var(--gap-between-tooltip-to-button)); 109 | } 110 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /design_button/RatnojitSaha-28.css: -------------------------------------------------------------------------------- 1 | .cssbuttons-io-button { 2 | background: #a370f0; 3 | color: white; 4 | font-family: inherit; 5 | padding: 0.35em; 6 | padding-left: 1.2em; 7 | font-size: 17px; 8 | font-weight: 500; 9 | border-radius: 0.9em; 10 | border: none; 11 | letter-spacing: 0.05em; 12 | display: flex; 13 | align-items: center; 14 | box-shadow: inset 0 0 1.6em -0.6em #714da6; 15 | overflow: hidden; 16 | position: relative; 17 | height: 2.8em; 18 | padding-right: 3.3em; 19 | cursor: pointer; 20 | } 21 | 22 | .cssbuttons-io-button .icon { 23 | background: white; 24 | margin-left: 1em; 25 | position: absolute; 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | height: 2.2em; 30 | width: 2.2em; 31 | border-radius: 0.7em; 32 | box-shadow: 0.1em 0.1em 0.6em 0.2em #7b52b9; 33 | right: 0.3em; 34 | transition: all 0.3s; 35 | } 36 | 37 | .cssbuttons-io-button:hover .icon { 38 | width: calc(100% - 0.6em); 39 | } 40 | 41 | .cssbuttons-io-button .icon svg { 42 | width: 1.1em; 43 | transition: transform 0.3s; 44 | color: #7b52b9; 45 | } 46 | 47 | .cssbuttons-io-button:hover .icon svg { 48 | transform: translateX(0.1em); 49 | } 50 | 51 | .cssbuttons-io-button:active .icon { 52 | transform: scale(0.95); 53 | } 54 | -------------------------------------------------------------------------------- /design_button/RatnojitSaha-29.css: -------------------------------------------------------------------------------- 1 | /* tooltip settings 👇 */ 2 | 3 | .copy { 4 | /* button */ 5 | --button-bg: #353434; 6 | --button-hover-bg: #464646; 7 | --button-text-color: #CCCCCC; 8 | --button-hover-text-color: #8bb9fe; 9 | --button-border-radius: 10px; 10 | --button-diameter: 36px; 11 | --button-outline-width: 1px; 12 | --button-outline-color: rgb(141, 141, 141); 13 | /* tooltip */ 14 | --tooltip-bg: #f4f3f3; 15 | --toolptip-border-radius: 4px; 16 | --tooltip-font-family: Menlo, Roboto Mono, monospace; 17 | /* 👆 this field should not be empty */ 18 | --tooltip-font-size: 12px; 19 | /* 👆 this field should not be empty */ 20 | --tootip-text-color: rgb(50, 50, 50); 21 | --tooltip-padding-x: 7px; 22 | --tooltip-padding-y: 7px; 23 | --tooltip-offset: 8px; 24 | /* --tooltip-transition-duration: 0.3s; */ 25 | /* 👆 if you need a transition, 26 | just remove the comment, 27 | but I didn't like the transition :| */ 28 | } 29 | 30 | .copy { 31 | box-sizing: border-box; 32 | width: var(--button-diameter); 33 | height: var(--button-diameter); 34 | border-radius: var(--button-border-radius); 35 | background-color: var(--button-bg); 36 | color: var(--button-text-color); 37 | border: none; 38 | cursor: pointer; 39 | position: relative; 40 | outline: none; 41 | } 42 | 43 | .tooltip { 44 | position: absolute; 45 | opacity: 0; 46 | visibility: 0; 47 | top: 0; 48 | left: 50%; 49 | transform: translateX(-50%); 50 | white-space: nowrap; 51 | font: var(--tooltip-font-size) var(--tooltip-font-family); 52 | color: var(--tootip-text-color); 53 | background: var(--tooltip-bg); 54 | padding: var(--tooltip-padding-y) var(--tooltip-padding-x); 55 | border-radius: var(--toolptip-border-radius); 56 | pointer-events: none; 57 | transition: all var(--tooltip-transition-duration) cubic-bezier(0.68, -0.55, 0.265, 1.55); 58 | } 59 | 60 | .tooltip::before { 61 | content: attr(data-text-initial); 62 | } 63 | 64 | .tooltip::after { 65 | content: ""; 66 | position: absolute; 67 | bottom: calc(var(--tooltip-padding-y) / 2 * -1); 68 | width: var(--tooltip-padding-y); 69 | height: var(--tooltip-padding-y); 70 | background: inherit; 71 | left: 50%; 72 | transform: translateX(-50%) rotate(45deg); 73 | z-index: -999; 74 | pointer-events: none; 75 | } 76 | 77 | .copy svg { 78 | position: absolute; 79 | top: 50%; 80 | left: 50%; 81 | transform: translate(-50%, -50%); 82 | } 83 | 84 | .checkmark { 85 | display: none; 86 | } 87 | 88 | /* actions */ 89 | 90 | .copy:hover .tooltip, 91 | .copy:focus:not(:focus-visible) .tooltip { 92 | opacity: 1; 93 | visibility: visible; 94 | top: calc((100% + var(--tooltip-offset)) * -1); 95 | } 96 | 97 | .copy:focus:not(:focus-visible) .tooltip::before { 98 | content: attr(data-text-end); 99 | } 100 | 101 | .copy:focus:not(:focus-visible) .clipboard { 102 | display: none; 103 | } 104 | 105 | .copy:focus:not(:focus-visible) .checkmark { 106 | display: block; 107 | } 108 | 109 | .copy:hover, 110 | .copy:focus { 111 | background-color: var(--button-hover-bg); 112 | } 113 | 114 | .copy:active { 115 | outline: var(--button-outline-width) solid var(--button-outline-color); 116 | } 117 | 118 | .copy:hover svg { 119 | color: var(--button-hover-text-color); 120 | } -------------------------------------------------------------------------------- /design_button/RatnojitSaha-3.css: -------------------------------------------------------------------------------- 1 | #ratnojit3 { 2 | border: 5em; 3 | cursor: pointer; 4 | outline: none; 5 | font-size: 16px; 6 | -webkit-transform: translate(0); 7 | transform: translate(0); 8 | background-image: linear-gradient(45deg, #4568dc, #b06ab3); 9 | padding: 0.7em 2em; 10 | border-radius: 65px; 11 | box-shadow: 1px 1px 10px rgba(255, 255, 255, 0.438); 12 | -webkit-transition: box-shadow 0.25s; 13 | transition: box-shadow 0.25s; 14 | color: white; 15 | } 16 | 17 | #ratnojit3 .text { 18 | background-clip: text; 19 | -webkit-background-clip: text; 20 | -webkit-text-fill-color: transparent; 21 | background-image: linear-gradient(45deg, #4568dc, #b06ab3); 22 | } 23 | 24 | #ratnojit3:after { 25 | content: ""; 26 | border-radius: 18px; 27 | position: absolute; 28 | margin: 4px; 29 | top: 0; 30 | left: 0; 31 | bottom: 0; 32 | right: 0; 33 | z-index: -1; 34 | background: #0e0e10; 35 | } 36 | 37 | #ratnojit3:hover { 38 | background-image: linear-gradient(-45deg, #4568dc, #b06ab3); 39 | box-shadow: 0 12px 24px rgba(128, 128, 128, 0.1); 40 | } 41 | 42 | #ratnojit3:hover .text { 43 | background-image: linear-gradient(-45deg, #4568dc, #b06ab3); 44 | } -------------------------------------------------------------------------------- /design_button/RatnojitSaha-30.css: -------------------------------------------------------------------------------- 1 | .light-button button.bt { 2 | position: relative; 3 | height: 200px; 4 | display: flex; 5 | align-items: flex-end; 6 | outline: none; 7 | background: none; 8 | border: none; 9 | cursor: pointer; 10 | } 11 | 12 | .light-button button.bt .button-holder { 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | justify-content: center; 17 | height: 100px; 18 | width: 100px; 19 | background-color: #0a0a0a; 20 | border-radius: 5px; 21 | color: #0f0f0f; 22 | font-weight: 700; 23 | transition: 300ms; 24 | outline: #0f0f0f 2px solid; 25 | outline-offset: 20; 26 | } 27 | 28 | .light-button button.bt .button-holder svg { 29 | height: 50px; 30 | fill: #0f0f0f; 31 | transition: 300ms; 32 | } 33 | 34 | .light-button button.bt .light-holder { 35 | position: absolute; 36 | height: 200px; 37 | width: 100px; 38 | display: flex; 39 | flex-direction: column; 40 | align-items: center; 41 | } 42 | 43 | .light-button button.bt .light-holder .dot { 44 | position: absolute; 45 | top: 0; 46 | width: 10px; 47 | height: 10px; 48 | background-color: #0a0a0a; 49 | border-radius: 10px; 50 | z-index: 2; 51 | } 52 | 53 | .light-button button.bt .light-holder .light { 54 | position: absolute; 55 | top: 0; 56 | width: 200px; 57 | height: 200px; 58 | clip-path: polygon(50% 0%, 25% 100%, 75% 100%); 59 | background: transparent; 60 | } 61 | 62 | .light-button button.bt:hover .button-holder svg { 63 | fill: rgba(88, 101, 242, 1); 64 | } 65 | 66 | .light-button button.bt:hover .button-holder { 67 | color: rgba(88, 101, 242, 1); 68 | outline: rgba(88, 101, 242, 1) 2px solid; 69 | outline-offset: 2px; 70 | } 71 | 72 | .light-button button.bt:hover .light-holder .light { 73 | background: rgb(255, 255, 255); 74 | background: linear-gradient( 75 | 180deg, 76 | rgba(88, 101, 242, 1) 0%, 77 | rgba(255, 255, 255, 0) 75%, 78 | rgba(255, 255, 255, 0) 100% 79 | ); 80 | } 81 | -------------------------------------------------------------------------------- /design_button/RatnojitSaha-31.css: -------------------------------------------------------------------------------- 1 | .button { 2 | align-items: center; 3 | appearance: none; 4 | background-color: #EEF2FF; 5 | border-radius: 8px; 6 | border-width: 2px; 7 | border-color: #536DFE; 8 | box-shadow: rgba(83, 109, 254, 0.2) 0 2px 4px, rgba(83, 109, 254, 0.15) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset; 9 | box-sizing: border-box; 10 | color: #536DFE; 11 | cursor: pointer; 12 | display: inline-flex; 13 | font-family: "JetBrains Mono", monospace; 14 | height: 56px; 15 | justify-content: center; 16 | line-height: 1; 17 | list-style: none; 18 | overflow: hidden; 19 | padding-left: 24px; 20 | padding-right: 24px; 21 | position: relative; 22 | text-align: center; 23 | text-decoration: none; 24 | transition: box-shadow 0.15s, transform 0.15s; 25 | user-select: none; 26 | -webkit-user-select: none; 27 | touch-action: manipulation; 28 | white-space: nowrap; 29 | will-change: box-shadow, transform; 30 | font-size: 20px; 31 | } 32 | 33 | .button:focus { 34 | outline: none; 35 | box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(83, 109, 254, 0.4) 0 2px 4px, rgba(83, 109, 254, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset; 36 | } 37 | 38 | .button:hover { 39 | box-shadow: rgba(83, 109, 254, 0.3) 0 4px 8px, rgba(83, 109, 254, 0.2) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset; 40 | transform: translateY(-2px); 41 | } 42 | 43 | .button:active { 44 | box-shadow: #D6D6E7 0 3px 7px inset; 45 | transform: translateY(2px); 46 | } -------------------------------------------------------------------------------- /design_button/RatnojitSaha-4.css: -------------------------------------------------------------------------------- 1 | @keyframes background { 2 | 0% { 3 | background-position: 0% 0%; 4 | } 5 | 100% { 6 | background-position: 100% 100%; 7 | } 8 | } 9 | 10 | #ratnojit4 { 11 | cursor: pointer; 12 | outline: solid; 13 | border: none; 14 | background-color: #ff03d1; 15 | padding: 0.3em 1.2em; 16 | border-radius: 30px; 17 | font-size: 1.3rem; 18 | font-weight: 550; 19 | color: #ffffff; 20 | background-size: 100% 100%; 21 | box-shadow: 0 0 0 4px #e00697 inset; 22 | } 23 | 24 | #ratnojit4:hover { 25 | background-image: linear-gradient( 26 | 55deg, 27 | transparent 10%, 28 | #161616 10% 20%, 29 | transparent 20% 30%, 30 | #161616 30% 40%, 31 | transparent 40% 50%, 32 | #161616 50% 60%, 33 | transparent 60% 70%, 34 | #161616 70% 80%, 35 | transparent 80% 90%, 36 | #161616 90% 100% 37 | ); 38 | background-size: 150% 150%; 39 | animation: background 3s linear infinite; 40 | } 41 | -------------------------------------------------------------------------------- /design_button/RatnojitSaha-5.css: -------------------------------------------------------------------------------- 1 | #ratnojit5 { 2 | display: inline-block; 3 | padding: 0.5em 1.7em; 4 | margin: 0 0.1em 0.1em 0; 5 | border: 0.16em solid rgba(255, 255, 255, 0); 6 | background-color: rgb(80, 10, 172); 7 | border-radius: 2em; 8 | box-sizing: border-box; 9 | text-decoration: none; 10 | font-family: "Roboto", sans-serif; 11 | font-weight: 300; 12 | color: #ffffff; 13 | text-shadow: 0 0.04em 0.04em rgba(0, 0, 0, 0.35); 14 | text-align: center; 15 | transition: all 0.2s; 16 | } 17 | 18 | #ratnojit5:hover { 19 | border-color: rgb(255, 255, 255); 20 | } -------------------------------------------------------------------------------- /design_button/RatnojitSaha-6.css: -------------------------------------------------------------------------------- 1 | #ratnojit6{ 2 | width: 160px; 3 | font-size: 16px; 4 | font-weight: 600; 5 | color: #fff; 6 | cursor: pointer; 7 | height: 50px; 8 | text-align:center; 9 | border: none; 10 | background-size: 300% 100%; 11 | border-radius: 50px; 12 | -moz-transition: all .4s ease-in-out; 13 | -o-transition: all .4s ease-in-out; 14 | -webkit-transition: all .4s ease-in-out; 15 | transition: all .4s ease-in-out; 16 | } 17 | 18 | #ratnojit6:hover { 19 | background-position: 100% 0; 20 | -moz-transition: all .4s ease-in-out; 21 | -o-transition: all .4s ease-in-out; 22 | -webkit-transition: all .4s ease-in-out; 23 | transition: all .4s ease-in-out; 24 | } 25 | 26 | #ratnojit6:focus { 27 | outline: none; 28 | } 29 | 30 | #ratnojit6{ 31 | background-image: linear-gradient( 32 | to right, 33 | #25aae1, 34 | #4481eb, 35 | #04befe, 36 | #3f86ed 37 | ); 38 | box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75); 39 | } -------------------------------------------------------------------------------- /design_button/RatnojitSaha-7.css: -------------------------------------------------------------------------------- 1 | #ratnojit7 { 2 | display: inline-block; 3 | padding: 0.65em 1.6em; 4 | border: 3px solid #ffffff; 5 | margin: 0 0.3em 0.3em 0; 6 | border-radius: 0.12em; 7 | box-sizing: border-box; 8 | text-decoration: none; 9 | font-family: "Roboto", sans-serif; 10 | font-weight: 300; 11 | color: #ffffff; 12 | text-align: center; 13 | transition: all 0.2s; 14 | animation: bn13bouncy 2s infinite linear; 15 | position: relative; 16 | background-color: black; 17 | } 18 | 19 | #ratnojit7:hover { 20 | background-color: white; 21 | color: #000000; 22 | } 23 | 24 | @keyframes bn13bouncy { 25 | 0% { 26 | top: 0em; 27 | } 28 | 40% { 29 | top: 0em; 30 | } 31 | 43% { 32 | top: -0.9em; 33 | } 34 | 46% { 35 | top: 0em; 36 | } 37 | 48% { 38 | top: -0.4em; 39 | } 40 | 50% { 41 | top: 0em; 42 | } 43 | 100% { 44 | top: 0em; 45 | } 46 | } -------------------------------------------------------------------------------- /design_button/RatnojitSaha-8.css: -------------------------------------------------------------------------------- 1 | #ratnojit8 { 2 | width: 160px; 3 | font-size: 16px; 4 | font-weight: 600; 5 | color: #fff; 6 | cursor: pointer; 7 | 8 | height: 55px; 9 | text-align:center; 10 | border: none; 11 | background-size: 300% 100%; 12 | border-radius: 50px; 13 | -moz-transition: all .4s ease-in-out; 14 | -o-transition: all .4s ease-in-out; 15 | -webkit-transition: all .4s ease-in-out; 16 | transition: all .4s ease-in-out; 17 | } 18 | 19 | #ratnojit8:hover { 20 | background-position: 100% 0; 21 | -moz-transition: all .4s ease-in-out; 22 | -o-transition: all .4s ease-in-out; 23 | -webkit-transition: all .4s ease-in-out; 24 | transition: all .4s ease-in-out; 25 | } 26 | 27 | #ratnojit8:focus { 28 | outline: none; 29 | } 30 | 31 | #ratnojit8{ 32 | background-image: linear-gradient( 33 | to right, 34 | #f5ce62, 35 | #e43603, 36 | #fa7199, 37 | #e85a19 38 | ); 39 | box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75); 40 | } -------------------------------------------------------------------------------- /design_button/RatnojitSaha-9.css: -------------------------------------------------------------------------------- 1 | #ratnojit9{ 2 | background-color: rgb(255, 255, 255); 3 | border: none; 4 | color: rgb(0, 0, 0); 5 | padding: 12px 16px; 6 | font-size: 16px; 7 | font-family: "Roboto", sans-serif; 8 | cursor: pointer; 9 | border-radius: 2rem; 10 | width: 10rem; 11 | } -------------------------------------------------------------------------------- /design_button/Sanglap-Halder.css: -------------------------------------------------------------------------------- 1 | #Sanglap-Halder { 2 | font-size: 30px; 3 | letter-spacing: 0.07vw; 4 | background-color: #ffdf00; 5 | box-shadow: inset 0vw 0vw 0.5vw 0.3vw #ecbd00; 6 | font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 7 | text-shadow: 0vw 0vw 0.5vw white; 8 | border-radius: 3vw; 9 | /* position: relative; 10 | align-items: center; */ 11 | width: 10vw; 12 | left: 4.5vw; 13 | } 14 | 15 | #Sanglap-Halder:hover { 16 | color: white; 17 | background-color: rgba(0, 0, 0, 0); 18 | box-shadow: inset 0vw 0vw 0.5vw 0.3vw rgba(0, 0, 0, 0); 19 | font-weight: 900; 20 | } -------------------------------------------------------------------------------- /design_button/Sruti-sahini.css: -------------------------------------------------------------------------------- 1 | #Sruti-sahini { 2 | width:200px; 3 | height:70px; 4 | background: linear-gradient(to left top, #c32c71 50%, #b33771 50%); 5 | border-style: none; 6 | color:#fff; 7 | font-size: 23px; 8 | letter-spacing: 3px; 9 | font-family: 'Lato'; 10 | font-weight: 600; 11 | outline: none; 12 | cursor: pointer; 13 | position: relative; 14 | padding: 0px; 15 | overflow: hidden; 16 | transition: all .5s; 17 | box-shadow: 0px 1px 2px rgba(0,0,0,.2); 18 | 19 | } 20 | 21 | #Sruti-sahini span{ 22 | position: absolute; 23 | display: block; 24 | } 25 | 26 | #Sruti-sahini span:nth-child(1){ 27 | height: 3px; 28 | width:200px; 29 | top:0px; 30 | left:-200px; 31 | background: linear-gradient(to right, rgba(0,0,0,0), #f6e58d); 32 | border-top-right-radius: 1px; 33 | border-bottom-right-radius: 1px; 34 | animation: span1 2s linear infinite; 35 | animation-delay: 1s; 36 | } 37 | 38 | @keyframes span1{ 39 | 0%{ 40 | left:-200px 41 | } 42 | 100%{ 43 | left:200px; 44 | } 45 | } 46 | 47 | #Sruti-sahini span:nth-child(2){ 48 | height: 70px; 49 | width: 3px; 50 | top:-70px; 51 | right:0px; 52 | background: linear-gradient(to bottom, rgba(0,0,0,0), #f6e58d); 53 | border-bottom-left-radius: 1px; 54 | border-bottom-right-radius: 1px; 55 | animation: span2 2s linear infinite; 56 | animation-delay: 2s; 57 | } 58 | @keyframes span2{ 59 | 0%{ 60 | top:-70px; 61 | } 62 | 100%{ 63 | top:70px; 64 | } 65 | } 66 | 67 | #Sruti-sahini span:nth-child(3){ 68 | height:3px; 69 | width:200px; 70 | right:-200px; 71 | bottom: 0px; 72 | background: linear-gradient(to left, rgba(0,0,0,0), #f6e58d); 73 | border-top-left-radius: 1px; 74 | border-bottom-left-radius: 1px; 75 | animation: span3 2s linear infinite; 76 | animation-delay: 3s; 77 | } 78 | @keyframes span3{ 79 | 0%{ 80 | right:-200px; 81 | } 82 | 100%{ 83 | right: 200px; 84 | } 85 | } 86 | 87 | #Sruti-sahini span:nth-child(4){ 88 | height:70px; 89 | width:3px; 90 | bottom:-70px; 91 | left:0px; 92 | background: linear-gradient(to top, rgba(0,0,0,0), #f6e58d); 93 | border-top-right-radius: 1px; 94 | border-top-left-radius: 1px; 95 | animation: span4 2s linear infinite; 96 | animation-delay: 4s; 97 | } 98 | @keyframes span4{ 99 | 0%{ 100 | bottom: -70px; 101 | } 102 | 100%{ 103 | bottom:70px; 104 | } 105 | } 106 | 107 | #Sruti-sahini:hover{ 108 | transition: all .5s; 109 | transform: rotate(-3deg) scale(1.1); 110 | box-shadow: 0px 3px 5px rgba(0,0,0,.4); 111 | } 112 | #Sruti-sahini:hover span{ 113 | animation-play-state: paused; 114 | } -------------------------------------------------------------------------------- /design_button/SuvayuN-1.css: -------------------------------------------------------------------------------- 1 | #SuvayuN-1{ 2 | height: 3rem; 3 | width: 8rem; 4 | margin-bottom: 2rem; 5 | border-radius: 1.2rem; 6 | color: white; 7 | -webkit-animation-name: ClrCng; 8 | -webkit-animation-iteration-count: infinite; 9 | -webkit-animation-duration: 2s; 10 | transition-duration: 500ms; 11 | } 12 | 13 | @-webkit-keyframes ClrCng { 14 | 0% { background-color: rgb(0, 0, 255); } 15 | 12% { background-color: rgb(63, 0, 191); } 16 | 25% { background-color: rgb(127, 0, 127); } 17 | 37% { background-color: rgb(191, 0, 63); } 18 | 50% { background-color: rgb(255, 0, 0); } 19 | 62% { background-color: rgb(191, 0, 63); } 20 | 75% { background-color: rgb(127, 0, 127); } 21 | 87% { background-color: rgb(63, 0, 191); } 22 | 100% { background-color: rgb(0, 0, 255); } 23 | } 24 | 25 | #SuvayuN-1:hover{ 26 | transform: scale(1.1); 27 | box-shadow: 2.5px 2.5px 2.5px white; 28 | } -------------------------------------------------------------------------------- /design_button/SuvayuN-2.css: -------------------------------------------------------------------------------- 1 | #SuvayuN-2{ 2 | height: 3rem; 3 | width: 8rem; 4 | border-radius: 2rem; 5 | margin-bottom: 2rem; 6 | background: linear-gradient(-45deg, #ff4000, #fda900, #08e839, #00b3ff); 7 | background-size: 400% 400%; 8 | animation: gradient 3s ease infinite; 9 | transition: 0.5s; 10 | } 11 | 12 | @keyframes gradient { 13 | 0% { 14 | background-position: 0% 50%; 15 | } 16 | 50% { 17 | background-position: 100% 50%; 18 | } 19 | 100% { 20 | background-position: 0% 50%; 21 | } 22 | } 23 | 24 | #SuvayuN-2:hover{ 25 | transform: scale(1.1); 26 | animation-play-state: paused; 27 | } 28 | -------------------------------------------------------------------------------- /design_button/SuvayuN-3.css: -------------------------------------------------------------------------------- 1 | #SuvayuN-3{ 2 | transition: 500ms ease-in-out; 3 | background: -webkit-radial-gradient(circle,white,black); 4 | border: 2px solid black; 5 | font-weight: 700; 6 | height: 5rem; 7 | width: 5rem; 8 | border-radius: 50%; 9 | margin-bottom: 0rem; 10 | } 11 | 12 | #SuvayuN-3:hover{ 13 | height: 5rem; 14 | width: 10rem; 15 | border-radius: 1rem; 16 | } -------------------------------------------------------------------------------- /design_button/SuvayuN-4.css: -------------------------------------------------------------------------------- 1 | #SuvayuN-4{ 2 | height: 2rem; 3 | width: 5rem; 4 | border-radius: 0.4rem; 5 | margin-bottom: 2rem; 6 | transition: 1s; 7 | background-color: aquamarine; 8 | } 9 | 10 | #SuvayuN-4:hover{ 11 | transform: rotate(360deg) scale(1.5); 12 | background-color: black; 13 | color: aquamarine; 14 | } -------------------------------------------------------------------------------- /design_button/SuvayuN-5.css: -------------------------------------------------------------------------------- 1 | #SuvayuN-5{ 2 | position: relative; 3 | height: 4rem; 4 | width: 4rem; 5 | border-radius: 2rem 1rem 1rem 1rem; 6 | top: -1rem; 7 | left: 2rem; 8 | margin-bottom: 1rem; 9 | transition: 0.5s; 10 | animation: rot 0.5s infinite alternate; 11 | transform-origin: top left; 12 | background: linear-gradient(-45deg,orange,green); 13 | font-weight: 700; 14 | } 15 | 16 | @keyframes rot{ 17 | 0%{ 18 | transform: rotate(29deg); 19 | } 20 | 25%{ 21 | transform: rotate(37deg); 22 | } 23 | 50%{ 24 | transform: rotate(45deg); 25 | } 26 | 75%{ 27 | transform: rotate(53deg); 28 | } 29 | 100%{ 30 | transform: rotate(61deg); 31 | } 32 | } 33 | 34 | #SuvayuN-5:hover{ 35 | animation-play-state: paused; 36 | } -------------------------------------------------------------------------------- /design_button/SuvayuN-6.css: -------------------------------------------------------------------------------- 1 | #SuvayuN-6{ 2 | height: 3rem; 3 | width: 8rem; 4 | border-radius: 0.4rem; 5 | margin-bottom: 2rem; 6 | transition: 1s ease-in-out; 7 | background-color: brown; 8 | color: white; 9 | transition: 1s; 10 | text-shadow: 1px 1px 1px white; 11 | } 12 | 13 | @keyframes jiggle{ 14 | 0%{ 15 | transform: rotate(-45deg); 16 | } 17 | 50%{ 18 | transform: rotate(0deg); 19 | } 20 | 100%{ 21 | transform: rotate(45deg); 22 | } 23 | } 24 | 25 | #SuvayuN-6:hover{ 26 | animation: jiggle 0.1s infinite alternate; 27 | transform: scale(1.1); 28 | box-shadow: 0.5rem 0.5rem 0.5rem brown; 29 | } -------------------------------------------------------------------------------- /design_button/SuvayuN-7.css: -------------------------------------------------------------------------------- 1 | #SuvayuN-7{ 2 | height: 3rem; 3 | width: 8rem; 4 | border-radius: 2rem; 5 | margin-bottom: 2rem; 6 | background: transparent; 7 | border: transparent; 8 | transition: 0.5s; 9 | } 10 | 11 | #SuvayuN-7:hover{ 12 | background-color: cornflowerblue; 13 | box-shadow: 0.25rem 0.25rem 0.25rem cornflowerblue; 14 | } -------------------------------------------------------------------------------- /design_button/SuvayuN-8.css: -------------------------------------------------------------------------------- 1 | #SuvayuN-8{ 2 | position: relative; 3 | height: 3rem; 4 | width: 8rem; 5 | background-color: black; 6 | color: red; 7 | border-radius: 2rem; 8 | margin-bottom: 2rem; 9 | transition: 1s; 10 | } 11 | #SuvayuN-8:hover{ 12 | transform: scale(1.1); 13 | box-shadow: 1.5px 1.5px 1.5px grey; 14 | } -------------------------------------------------------------------------------- /design_button/SuvayuN.css: -------------------------------------------------------------------------------- 1 | #SuvayuN{ 2 | height: 80px; 3 | width: 80px; 4 | border-radius: 50%; 5 | font-family: Georgia, 'Times New Roman', Times, serif; 6 | margin-bottom: 10px; 7 | margin-top: -10px; 8 | border: 2px solid blue; 9 | box-shadow: 5px 5px 5px rgb(23, 0, 199); 10 | background: linear-gradient(-45deg, #05337d 0%, #40c9ff 100% ); 11 | color: white; 12 | transition-duration: 500ms; 13 | } 14 | 15 | #SuvayuN:hover{ 16 | transform: scale(1.1); 17 | box-shadow: 7.5px 7.5px 7.5px rgb(23, 0, 199); 18 | 19 | } -------------------------------------------------------------------------------- /design_button/TanushreeBorase.css: -------------------------------------------------------------------------------- 1 | 2 | .bookmarkBtn-1 { 3 | width: 100px; 4 | height: 40px; 5 | border-radius: 40px; 6 | border: 1px solid rgba(255, 255, 255, 0.349); 7 | background-color: rgb(12, 12, 12); 8 | display: flex; 9 | align-items: center; 10 | justify-content: flex-end; 11 | cursor: pointer; 12 | transition-duration: 0.3s; 13 | overflow: hidden; 14 | top: 0; 15 | right: 50%; /* Position in the center horizontally */ 16 | transform: translateX(90%); /* Adjust to center the button */ 17 | } 18 | 19 | .IconContainer-1 20 | { 21 | width: 30px; 22 | height: 30px; 23 | background: linear-gradient(to bottom, rgb(255, 136, 255), rgb(172, 70, 255)); 24 | border-radius: 40px; 25 | display: flex; 26 | align-items: center; 27 | justify-content: center; 28 | overflow: hidden; 29 | z-index: 2; 30 | transition-duration: 0.3s; 31 | } 32 | 33 | .icon-1{ 34 | border-radius: 5px; 35 | } 36 | 37 | .text-1{ 38 | height: 100%; 39 | width: 60px; 40 | display: flex; 41 | align-items: center; 42 | margin-top: 10px; 43 | justify-content: center; 44 | color: white; 45 | z-index: 1; 46 | transition-duration: 0.3s; 47 | font-size: 1.04em; 48 | } 49 | 50 | .bookmarkBtn-1:hover .IconContainer-1{ 51 | width: 90px; 52 | transition-duration: 0.3s; 53 | } 54 | 55 | .bookmarkBtn-1:hover .text-1 { 56 | transform: translate(10px); 57 | width: 0; 58 | font-size: 0; 59 | transition-duration: 0.3s; 60 | } 61 | 62 | .bookmarkBtn-1:active { 63 | transform: scale(0.95); 64 | transition-duration: 0.3s; 65 | } 66 | -------------------------------------------------------------------------------- /design_button/ayesha-1.css: -------------------------------------------------------------------------------- 1 | #animated-button { 2 | display: inline-block; 3 | outline: 0; 4 | text-align: center; 5 | cursor: pointer; 6 | padding: 17px 30px; 7 | border: 0; 8 | color: #fff; 9 | font-size: 17.5px; 10 | background: #00d301; 11 | background: -webkit-linear-gradient(-196deg,#00d301,#36c275 50%,#00a562); 12 | background: -webkit-linear-gradient(164deg,#00d301,#36c275 50%,#00a562); 13 | background: linear-gradient(286deg,#00d301,#36c275 50%,#00a562); 14 | line-height: 30px; 15 | font-weight: 800; 16 | transition: background .3s ease-in-out, color .3s ease-in-out; 17 | } 18 | 19 | #animated-button:hover { 20 | background: #00a562; 21 | color: #fff; 22 | } -------------------------------------------------------------------------------- /design_button/ayesha-2.css: -------------------------------------------------------------------------------- 1 | #new { 2 | color: black; 3 | border: 2px solid rgb(216, 2, 134); 4 | border-radius: 0px; 5 | padding: 18px 36px; 6 | display: inline-block; 7 | font-family: "Lucida Console", Monaco, monospace; 8 | font-size: 14px; 9 | letter-spacing: 1px; 10 | cursor: pointer; 11 | box-shadow: inset 0 0 0 0 #D80286; 12 | transition: ease-out 0.4s; 13 | } 14 | 15 | #new:hover { 16 | box-shadow: inset 400px 0 0 0 #D80286; 17 | } -------------------------------------------------------------------------------- /design_button/beprodeep4718.css: -------------------------------------------------------------------------------- 1 | #beprodeep4718 { 2 | background: #fffcd5; 3 | box-shadow: 4px 4px #FFC436, 9px 9px #151515; 4 | color: #151515; 5 | border: solid 2px #151515; 6 | text-decoration: none; 7 | padding: 0.8vw 1.8vw; 8 | margin-bottom: 10px; 9 | display: inline-flex; 10 | align-items: center; 11 | font-size: 1.4vw; 12 | font-weight: 900; 13 | position: relative; 14 | z-index: 1; 15 | transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); 16 | cursor: pointer; 17 | overflow: hidden; 18 | transition-delay: 0s !important; 19 | text-transform: uppercase !important; 20 | letter-spacing: 1.5px; 21 | font-family: freight-sans-pro, sans-serif; 22 | } 23 | 24 | #beprodeep4718::before { 25 | position: absolute; 26 | content: ""; 27 | top: 0; 28 | left: 0; 29 | width: 0%; 30 | height: 100%; 31 | background: #151515; 32 | z-index: -1; 33 | transition: 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); 34 | } 35 | 36 | #beprodeep4718:hover::before { 37 | width: 100%; 38 | right: 0; 39 | left: unset; 40 | } 41 | 42 | #beprodeep4718:hover { 43 | box-shadow: 0 0 #ffe00b, 0 0 #151515; 44 | color: white; 45 | } -------------------------------------------------------------------------------- /design_button/full.css: -------------------------------------------------------------------------------- 1 | .box-main { 2 | position: relative; 3 | } 4 | 5 | .box-main:hover { 6 | animation: glow 1s infinite alternate; 7 | } 8 | 9 | @keyframes glow { 10 | 0% { 11 | box-shadow: 0 0 20px rgba(255, 255, 255, 0); 12 | } 13 | 100% { 14 | box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); 15 | } 16 | } -------------------------------------------------------------------------------- /design_button/kom-senapati-1.css: -------------------------------------------------------------------------------- 1 | #kom-senapati-1 { 2 | min-width: 130px; 3 | height: 40px; 4 | color: #fff; 5 | padding: 5px 10px; 6 | font-weight: bold; 7 | cursor: pointer; 8 | transition: all 0.3s ease; 9 | position: relative; 10 | display: inline-block; 11 | outline: none; 12 | z-index: 0; 13 | background: #fff; 14 | overflow: hidden; 15 | border: 2.5px solid #212529; 16 | border-radius: 2px; 17 | color: #212529; 18 | } 19 | 20 | #kom-senapati-1:hover { 21 | color: #fff; 22 | } 23 | 24 | #kom-senapati-1:hover:after { 25 | width: 100%; 26 | } 27 | 28 | #kom-senapati-1:after { 29 | content: ""; 30 | position: absolute; 31 | z-index: -1; 32 | transition: all 0.3s ease; 33 | left: 0; 34 | top: 0; 35 | width: 0; 36 | height: 100%; 37 | background: #212529; 38 | } -------------------------------------------------------------------------------- /design_button/krittika2004.css: -------------------------------------------------------------------------------- 1 | #krittika2004{ 2 | display: inline-block; 3 | padding: 17px 27px; 4 | font-size: 16px; 5 | cursor: pointer; 6 | color: white; 7 | background-color: rgb(28, 7, 91); 8 | border: none; 9 | -webkit-transition-duration: 0.4s; 10 | transition-duration: 0.4s; 11 | border-radius: 8px; 12 | box-shadow: 0 10px #998; 13 | height: 60px; 14 | width: 150px; 15 | padding: 20px; 16 | } 17 | #krittika2004:active { 18 | background-color: rgb(102, 107, 185); 19 | box-shadow: 0 6px rgb(55, 55, 62); 20 | transform: translateY(10px); 21 | } 22 | -------------------------------------------------------------------------------- /design_button/nandita27/nandita27-1.css: -------------------------------------------------------------------------------- 1 | #nan-1 { 2 | padding: 0.9em 1.8em; 3 | text-transform: uppercase; 4 | text-decoration: none; 5 | letter-spacing: 4px; 6 | color: transparent; 7 | border: 3px solid #ff0; 8 | font-size: 14px; 9 | position: relative; 10 | font-family: inherit; 11 | background: transparent; 12 | cursor: pointer; 13 | } 14 | 15 | #nan-1::before { 16 | content: "button"; 17 | position: absolute; 18 | top: 0; 19 | left: 0; 20 | width: 100%; 21 | height: 100%; 22 | background-color: #363636; 23 | color: #ff0; 24 | display: flex; 25 | justify-content: center; 26 | align-items: center; 27 | transition: all 0.5s; 28 | } 29 | 30 | #nan-1:hover::before { 31 | left: 100%; 32 | transform: scale(0) rotateY(360deg); 33 | opacity: 0; 34 | } 35 | 36 | #nan-1::after { 37 | content: "button"; 38 | position: absolute; 39 | top: 0; 40 | left: -100%; 41 | width: 100%; 42 | height: 100%; 43 | background-color: #363636; 44 | color: #ff0; 45 | display: flex; 46 | justify-content: center; 47 | align-items: center; 48 | transition: all 0.5s; 49 | transform: scale(0) rotateY(0deg); 50 | opacity: 0; 51 | } 52 | 53 | #nan-1:hover::after { 54 | left: 0; 55 | transform: scale(1) rotateY(360deg); 56 | opacity: 1; 57 | } -------------------------------------------------------------------------------- /design_button/nandita27/nandita27-10.css: -------------------------------------------------------------------------------- 1 | #nan-10 { 2 | position: relative; 3 | width: 120px; 4 | height: 40px; 5 | background-color: #000; 6 | align-items: center; 7 | color: white; 8 | flex-direction: column; 9 | justify-content: center; 10 | border: none; 11 | padding: 12px; 12 | gap: 12px; 13 | border-radius: 8px; 14 | cursor: pointer; 15 | } 16 | 17 | #nan-10::before { 18 | content: ''; 19 | position: absolute; 20 | inset: 0; 21 | left: -4px; 22 | top: -1px; 23 | margin: auto; 24 | width: 128px; 25 | height: 48px; 26 | border-radius: 10px; 27 | background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% ); 28 | z-index: -10; 29 | pointer-events: none; 30 | transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); 31 | } 32 | 33 | #nan-10::after { 34 | content: ""; 35 | z-index: -1; 36 | position: absolute; 37 | inset: 0; 38 | background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% ); 39 | transform: translate3d(0, 0, 0) scale(0.95); 40 | filter: blur(20px); 41 | } 42 | 43 | #nan-10:hover::after { 44 | filter: blur(30px); 45 | } 46 | 47 | #nan-10:hover::before { 48 | transform: rotate(-180deg); 49 | } 50 | 51 | #nan-10:active::before { 52 | scale: 0.7; 53 | } 54 | 55 | -------------------------------------------------------------------------------- /design_button/nandita27/nandita27-2.css: -------------------------------------------------------------------------------- 1 | #nan-2 { 2 | position: relative; 3 | padding: 13px 35px; 4 | background: #f5ddb7; 5 | font-size: 17px; 6 | font-weight: 900; 7 | color: #181818; 8 | border: none; 9 | border-radius: 8px; 10 | box-shadow: 2px 2px 5px #18181869, inset 2px 2px 10px #ffffffb0; 11 | transition: all .3s ease-in-out; 12 | } 13 | 14 | .icon-1 { 15 | position: absolute; 16 | top: 10%; 17 | left: 50%; 18 | transform: translate(-50%, 0); 19 | width: 0px; 20 | height: auto; 21 | transition: all .5s ease-in-out; 22 | z-index: -1; 23 | } 24 | 25 | .icon-2 { 26 | position: absolute; 27 | top: 10%; 28 | left: 50%; 29 | transform: translate(-50%, 0); 30 | width: 0px; 31 | height: auto; 32 | transition: all .5s ease-in-out; 33 | z-index: -2; 34 | } 35 | 36 | .icon-3 { 37 | position: absolute; 38 | top: 10%; 39 | left: 50%; 40 | transform: translate(-50%, 0); 41 | width: 0px; 42 | height: auto; 43 | transition: all .5s ease-in-out; 44 | z-index: -2; 45 | } 46 | 47 | .icon-4 { 48 | position: absolute; 49 | top: 10%; 50 | left: 50%; 51 | transform: translate(-50%, 0); 52 | width: 0px; 53 | height: auto; 54 | transition: all .5s ease-in-out; 55 | z-index: -2; 56 | } 57 | 58 | .icon-5 { 59 | position: absolute; 60 | top: 10%; 61 | left: 50%; 62 | transform: translate(-50%, 0); 63 | width: 0px; 64 | height: auto; 65 | transition: all .5s ease-in-out; 66 | z-index: -2; 67 | } 68 | 69 | #nan-2:hover { 70 | padding: 13px 25px; 71 | border-radius: 8px 8px 24px 24px; 72 | } 73 | 74 | #nan-2:hover .icon-1 { 75 | top: -250%; 76 | left: 50%; 77 | transform: translate(-50%, 0); 78 | width: 50px; 79 | height: auto; 80 | animation: inIcon1 1s ease .45s forwards; 81 | } 82 | 83 | @keyframes inIcon1 { 84 | 0% { 85 | transform-origin: 0 100%; 86 | transform: translate(-50%, 0) rotate(0deg); 87 | } 88 | 89 | 25% { 90 | transform-origin: 0 100%; 91 | transform: translate(-50%, 0) rotate(5deg); 92 | } 93 | 94 | 50% { 95 | transform-origin: 0 100%; 96 | transform: translate(-50%, 0) rotate(1deg); 97 | } 98 | 99 | 65% { 100 | transform-origin: 0 100%; 101 | transform: translate(-50%, 0) rotate(3deg); 102 | } 103 | 104 | 100% { 105 | transform-origin: 0 100%; 106 | transform: translate(-50%, 0) rotate(0deg); 107 | } 108 | } 109 | 110 | #nan-2:hover .icon-2 { 111 | position: absolute; 112 | top: -200%; 113 | left: 90%; 114 | transform: translate(-50%, 0); 115 | width: 75px; 116 | height: auto; 117 | animation: inIcon2 1s ease .45s forwards; 118 | } 119 | 120 | @keyframes inIcon2 { 121 | 0% { 122 | transform-origin: 0 100%; 123 | transform: translate(-50%, 0) rotate(0deg); 124 | } 125 | 126 | 35% { 127 | transform-origin: 0 100%; 128 | transform: translate(-50%, 0) rotate(10deg); 129 | } 130 | 131 | 50% { 132 | transform-origin: 0 100%; 133 | transform: translate(-50%, 0) rotate(4deg); 134 | } 135 | 136 | 80% { 137 | transform-origin: 0 100%; 138 | transform: translate(-50%, 0) rotate(5deg); 139 | } 140 | 141 | 100% { 142 | transform-origin: 0 100%; 143 | transform: translate(-50%, 0) rotate(0deg); 144 | } 145 | } 146 | 147 | #nan-2:hover .icon-3 { 148 | position: absolute; 149 | top: -130%; 150 | left: 20%; 151 | transform: translate(-50%, 0); 152 | width: 60px; 153 | height: auto; 154 | animation: inIcon3 1s ease .45s forwards; 155 | } 156 | 157 | @keyframes inIcon3 { 158 | 0% { 159 | transform-origin: 0 100%; 160 | transform: translate(-50%, 0) rotate(0deg); 161 | } 162 | 163 | 35% { 164 | transform-origin: 0 100%; 165 | transform: translate(-50%, 0) rotate(-2deg); 166 | } 167 | 168 | 100% { 169 | transform-origin: 0 100%; 170 | transform: translate(-50%, 0) rotate(0deg); 171 | } 172 | } 173 | 174 | #nan-2:hover .icon-4 { 175 | position: absolute; 176 | top: -300%; 177 | left: 10%; 178 | transform: translate(-50%, 0); 179 | width: 85px; 180 | height: auto; 181 | animation: inIcon4 1s ease .45s forwards; 182 | } 183 | 184 | @keyframes inIcon4 { 185 | 0% { 186 | transform-origin: 0 100%; 187 | transform: translate(-50%, 0) rotate(0deg); 188 | } 189 | 190 | 40% { 191 | transform-origin: 0 100%; 192 | transform: translate(-50%, 0) rotate(-3deg); 193 | } 194 | 195 | 100% { 196 | transform-origin: 0 100%; 197 | transform: translate(-50%, 0) rotate(0deg); 198 | } 199 | } 200 | 201 | #nan-2:hover .icon-5 { 202 | position: absolute; 203 | top: -350%; 204 | left: 90%; 205 | transform: translate(-50%, 0); 206 | width: 85px; 207 | height: auto; 208 | animation: inIcon5 1s ease .45s forwards; 209 | } 210 | 211 | @keyframes inIcon5 { 212 | 0% { 213 | transform-origin: 0 100%; 214 | transform: translate(-50%, 0) rotate(0deg); 215 | } 216 | 217 | 35% { 218 | transform-origin: 0 100%; 219 | transform: translate(-50%, 0) rotate(-3deg); 220 | } 221 | 222 | 100% { 223 | transform-origin: 0 100%; 224 | transform: translate(-50%, 0) rotate(0deg); 225 | } 226 | } 227 | 228 | .fil-leaf-1 { 229 | fill: #7B9B3A 230 | } 231 | 232 | .fil-leaf-2 { 233 | fill: #556729; 234 | fill-rule: nonzero 235 | } 236 | 237 | .fil-leaf-3 { 238 | fill: #556729 239 | } 240 | 241 | .fil-leaf-4 { 242 | fill: #3C4819 243 | } 244 | 245 | .fil-leaf-5 { 246 | fill: #3C4819 247 | } -------------------------------------------------------------------------------- /design_button/nandita27/nandita27-3.css: -------------------------------------------------------------------------------- 1 | #nan-3 { 2 | position: relative; 3 | margin: 0; 4 | padding: 17px 35px; 5 | outline: none; 6 | text-decoration: none; 7 | justify-content: center; 8 | align-items: center; 9 | cursor: pointer; 10 | text-transform: uppercase; 11 | background-color: #fff; 12 | border: 1px solid rgba(22, 76, 167, 0.6); 13 | border-radius: 10px; 14 | color: #1d89ff; 15 | font-weight: 400; 16 | font-family: inherit; 17 | z-index: 0; 18 | overflow: hidden; 19 | transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1); 20 | } 21 | 22 | #nan-3 #nandu { 23 | color: #164ca7; 24 | font-size: 14px; 25 | font-weight: 500; 26 | letter-spacing: 0.7px; 27 | } 28 | 29 | #nan-3:hover { 30 | animation: rotate624 0.7s ease-in-out both; 31 | } 32 | 33 | #nan-3:hover #nandu { 34 | animation: storm1261 0.7s ease-in-out both; 35 | animation-delay: 0.06s; 36 | } 37 | 38 | @keyframes rotate624 { 39 | 0% { 40 | transform: rotate(0deg) translate3d(0, 0, 0); 41 | } 42 | 43 | 25% { 44 | transform: rotate(3deg) translate3d(0, 0, 0); 45 | } 46 | 47 | 50% { 48 | transform: rotate(-3deg) translate3d(0, 0, 0); 49 | } 50 | 51 | 75% { 52 | transform: rotate(1deg) translate3d(0, 0, 0); 53 | } 54 | 55 | 100% { 56 | transform: rotate(0deg) translate3d(0, 0, 0); 57 | } 58 | } 59 | 60 | @keyframes storm1261 { 61 | 0% { 62 | transform: translate3d(0, 0, 0) translateZ(0); 63 | } 64 | 65 | 25% { 66 | transform: translate3d(4px, 0, 0) translateZ(0); 67 | } 68 | 69 | 50% { 70 | transform: translate3d(-3px, 0, 0) translateZ(0); 71 | } 72 | 73 | 75% { 74 | transform: translate3d(2px, 0, 0) translateZ(0); 75 | } 76 | 77 | 100% { 78 | transform: translate3d(0, 0, 0) translateZ(0); 79 | } 80 | } 81 | 82 | .btn-shine { 83 | border: 1px solid; 84 | overflow: hidden; 85 | position: relative; 86 | 87 | } 88 | 89 | .btn-shine #nandu { 90 | z-index: 20; 91 | } 92 | 93 | .btn-shine:after { 94 | background: #38ef7d; 95 | content: ""; 96 | height: 155px; 97 | left: -75px; 98 | opacity: 0.4; 99 | position: absolute; 100 | top: -50px; 101 | transform: rotate(35deg); 102 | transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); 103 | width: 50px; 104 | z-index: -10; 105 | } 106 | 107 | .btn-shine:hover:after { 108 | left: 120%; 109 | transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); 110 | } -------------------------------------------------------------------------------- /design_button/nandita27/nandita27-4.css: -------------------------------------------------------------------------------- 1 | #nan-4 { 2 | border: none; 3 | width: 140px; 4 | height: 50px; 5 | color: #fff; 6 | z-index: 1; 7 | 8 | background: #000; 9 | position: relative; 10 | cursor: pointer; 11 | } 12 | 13 | #nan-4 p { 14 | margin: 0 auto; 15 | align-self: center; 16 | font-size: 17px; 17 | font-weight: bold; 18 | text-align: center; 19 | } 20 | 21 | #nan-4::after { 22 | position: absolute; 23 | display: block; 24 | content: ""; 25 | width: 100%; 26 | z-index: -1; 27 | height: 10%; 28 | bottom: 0; 29 | clip-path: polygon( 30 | 0% 74%, 31 | 4% 75%, 32 | 8% 76%, 33 | 11% 77%, 34 | 15% 78%, 35 | 20% 78%, 36 | 25% 77%, 37 | 32% 77%, 38 | 37% 75%, 39 | 40% 74%, 40 | 43% 74%, 41 | 46% 73%, 42 | 52% 72%, 43 | 57% 72%, 44 | 65% 74%, 45 | 66% 75%, 46 | 71% 78%, 47 | 75% 82%, 48 | 81% 86%, 49 | 83% 88%, 50 | 88% 91%, 51 | 90% 94%, 52 | 94% 96%, 53 | 98% 98%, 54 | 100% 100%, 55 | 82% 100%, 56 | 0 100% 57 | ); 58 | background: #8792eb; 59 | transition: 0.2s ease; 60 | } 61 | 62 | #nan-4::before { 63 | position: absolute; 64 | display: block; 65 | content: ""; 66 | /* bottom: 80%; */ 67 | transform: rotate(180deg); 68 | width: 100%; 69 | height: 10%; 70 | transition: 0.2s ease; 71 | /* bottom:; */ 72 | z-index: -1; 73 | clip-path: polygon( 74 | 0% 74%, 75 | 4% 75%, 76 | 8% 76%, 77 | 11% 77%, 78 | 15% 78%, 79 | 20% 78%, 80 | 25% 77%, 81 | 32% 77%, 82 | 37% 75%, 83 | 40% 74%, 84 | 43% 74%, 85 | 46% 73%, 86 | 52% 72%, 87 | 57% 72%, 88 | 65% 74%, 89 | 66% 75%, 90 | 71% 78%, 91 | 75% 82%, 92 | 81% 86%, 93 | 83% 88%, 94 | 88% 91%, 95 | 90% 94%, 96 | 94% 96%, 97 | 98% 98%, 98 | 100% 100%, 99 | 82% 100%, 100 | 0 100% 101 | ); 102 | background: #8792eb; 103 | } 104 | 105 | #nan-4:hover::after { 106 | clip-path: polygon( 107 | 0 30%, 108 | 9% 34%, 109 | 7% 39%, 110 | 11% 43%, 111 | 13% 33%, 112 | 17% 30%, 113 | 24% 34%, 114 | 25% 35%, 115 | 30% 31%, 116 | 30% 38%, 117 | 39% 33%, 118 | 35% 43%, 119 | 43% 45%, 120 | 55% 46%, 121 | 65% 74%, 122 | 67% 66%, 123 | 81% 57%, 124 | 75% 82%, 125 | 81% 86%, 126 | 83% 88%, 127 | 88% 91%, 128 | 90% 94%, 129 | 94% 96%, 130 | 98% 98%, 131 | 100% 100%, 132 | 82% 100%, 133 | 0 100% 134 | ); 135 | height: 80%; 136 | } 137 | 138 | #nan-4:hover::before { 139 | clip-path: polygon( 140 | 0 30%, 141 | 9% 34%, 142 | 7% 39%, 143 | 11% 43%, 144 | 13% 33%, 145 | 17% 30%, 146 | 24% 34%, 147 | 25% 35%, 148 | 30% 31%, 149 | 30% 38%, 150 | 39% 33%, 151 | 35% 43%, 152 | 43% 45%, 153 | 55% 46%, 154 | 65% 74%, 155 | 67% 66%, 156 | 81% 57%, 157 | 75% 82%, 158 | 81% 86%, 159 | 83% 88%, 160 | 88% 91%, 161 | 90% 94%, 162 | 94% 96%, 163 | 98% 98%, 164 | 100% 100%, 165 | 82% 100%, 166 | 0 100% 167 | ); 168 | height: 80%; 169 | } 170 | -------------------------------------------------------------------------------- /design_button/nandita27/nandita27-5.css: -------------------------------------------------------------------------------- 1 | #nan-5 { 2 | transform: rotate(-25deg) skew(25deg); 3 | transform-style: preserve-3d; 4 | position: relative; 5 | list-style: none; 6 | width: 100px; 7 | height: 32px; 8 | border: none; 9 | background: transparent; 10 | font-family: inherit; 11 | cursor: pointer; 12 | } 13 | 14 | #nan-5:before { 15 | content: ''; 16 | position: absolute; 17 | bottom: -10px; 18 | left: -5px; 19 | width: 100%; 20 | height: 10px; 21 | background: #2a2a2a; 22 | transform: skewX(-41deg); 23 | } 24 | 25 | #nan-5:after { 26 | content: ''; 27 | position: absolute; 28 | top: 5px; 29 | left: -9px; 30 | width: 9px; 31 | height: 100%; 32 | background: #2a2a2a; 33 | transform: skewY(-49deg); 34 | } 35 | 36 | #nan-5 span { 37 | position: absolute; 38 | top: 0; 39 | left: 0; 40 | width: 100%; 41 | height: 100%; 42 | background: #2a2a2a; 43 | color: #fff; 44 | font-size: 25px; 45 | transition: 1.1s ease-out; 46 | } 47 | 48 | #nan-5:hover span { 49 | z-index: 1000; 50 | transition: .3s; 51 | color: #fff; 52 | } 53 | 54 | #nan-5:hover span:nth-child(5) { 55 | transform: translate(40px, -40px); 56 | opacity: 1; 57 | } 58 | 59 | #nan-5:hover span:nth-child(4) { 60 | transform: translate(30px, -30px); 61 | opacity: .8; 62 | } 63 | 64 | #nan-5:hover span:nth-child(3) { 65 | transform: translate(20px, -20px); 66 | opacity: .6; 67 | } 68 | 69 | #nan-5:hover span:nth-child(2) { 70 | transform: translate(10px, -10px); 71 | opacity: .4; 72 | } 73 | 74 | #nan-5:hover span:nth-child(1) { 75 | transform: translate(0px, 0px); 76 | opacity: .2; 77 | } 78 | 79 | #nan-5:active span:nth-child(5) { 80 | transform: translate(20px, -20px); 81 | opacity: 1; 82 | } 83 | 84 | #nan-5:active span:nth-child(4) { 85 | transform: translate(15px, -15px); 86 | } 87 | 88 | #nan-5:active span:nth-child(3) { 89 | transform: translate(10px, -10px); 90 | } 91 | 92 | #nan-5:active span:nth-child(2) { 93 | transform: translate(5px, -5px); 94 | } 95 | 96 | #nan-5:active span:nth-child(1) { 97 | transform: translate(0px, 0px); 98 | } 99 | 100 | #nan-5:nth-child(1):hover span { 101 | background: #52E19F; 102 | } -------------------------------------------------------------------------------- /design_button/nandita27/nandita27-7.css: -------------------------------------------------------------------------------- 1 | #nan-7 { 2 | position: relative; 3 | font-size: 1.2em; 4 | padding: 0.7em 1.4em; 5 | background-color: #BF0426; 6 | text-decoration: none; 7 | border: none; 8 | border-radius: 0.5em; 9 | color: #DEDEDE; 10 | box-shadow: 0.5em 0.5em 0.5em rgba(0, 0, 0, 0.3); 11 | } 12 | 13 | #nan-7::before { 14 | position: absolute; 15 | content: ''; 16 | height: 0; 17 | width: 0; 18 | top: 0; 19 | left: 0; 20 | background: linear-gradient(135deg, rgba(33,33,33,1) 0%, rgba(33,33,33,1) 50%, rgba(150,4,31,1) 50%, rgba(191,4,38,1) 60%); 21 | border-radius: 0 0 0.5em 0; 22 | box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.3); 23 | transition: 0.3s; 24 | } 25 | 26 | #nan-7:hover::before { 27 | width: 1.6em; 28 | height: 1.6em; 29 | } 30 | 31 | #nan-7:active { 32 | box-shadow: 0.2em 0.2em 0.3em rgba(0, 0, 0, 0.3); 33 | transform: translate(0.1em, 0.1em); 34 | } -------------------------------------------------------------------------------- /design_button/nandita27/nandita27-8.css: -------------------------------------------------------------------------------- 1 | .wrapper-button { 2 | perspective: 500px; 3 | transform: rotatex(10deg); 4 | animation: rotateAngle 6s linear infinite; 5 | margin: auto; 6 | width: auto; 7 | } 8 | 9 | #nan-8 { 10 | position: relative; 11 | margin: 0.5em 0; 12 | padding: 0.8em 2.2em; 13 | cursor: pointer; 14 | background: #FFFFFF; 15 | border: none; 16 | border-radius: 0.4em; 17 | text-transform: uppercase; 18 | font-size: 19px; 19 | font-family: "Work Sans", sans-serif; 20 | font-weight: 500; 21 | letter-spacing: 0.04em; 22 | mix-blend-mode: color-dodge; 23 | perspective: 500px; 24 | transform-style: preserve-3d; 25 | } 26 | 27 | #nan-8:before, #nan-8:after { 28 | --z: 0px; 29 | position: absolute; 30 | top: 0; 31 | left: 0; 32 | display: block; 33 | content: ""; 34 | width: 100%; 35 | height: 100%; 36 | opacity: 0; 37 | mix-blend-mode: inherit; 38 | border-radius: inherit; 39 | transform-style: preserve-3d; 40 | transform: translate3d(calc(var(--z) * 0px), calc(var(--z) * 0px), calc(var(--z) * 0px)); 41 | } 42 | 43 | #nan-8 span { 44 | mix-blend-mode: none; 45 | display: block; 46 | } 47 | 48 | #nan-8:after { 49 | background-color: #5D00FF; 50 | } 51 | 52 | #nan-8:before { 53 | background-color: #FF1731; 54 | } 55 | 56 | #nan-8:hover { 57 | background-color: #FFF65B; 58 | transition: background 0.3s 0.1s; 59 | } 60 | 61 | #nan-8:hover:before { 62 | --z: 0.04; 63 | animation: translateWobble 2.2s ease forwards; 64 | } 65 | 66 | #nan-8:hover:after { 67 | --z: -0.06; 68 | animation: translateWobble 2.2s ease forwards; 69 | } 70 | 71 | @keyframes rotateAngle { 72 | 0% { 73 | transform: rotateY(0deg) rotateX(10deg); 74 | -webkit-animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); 75 | animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); 76 | } 77 | 78 | 25% { 79 | transform: rotateY(20deg) rotateX(10deg); 80 | } 81 | 82 | 50% { 83 | transform: rotateY(0deg) rotateX(10deg); 84 | -webkit-animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); 85 | animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); 86 | } 87 | 88 | 75% { 89 | transform: rotateY(-20deg) rotateX(10deg); 90 | } 91 | 92 | 100% { 93 | transform: rotateY(0deg) rotateX(10deg); 94 | } 95 | } 96 | 97 | @keyframes translateWobble { 98 | 0% { 99 | opacity: 0; 100 | transform: translate3d(calc(var(--z) * 0px), calc(var(--z) * 0px), calc(var(--z) * 0px)); 101 | } 102 | 103 | 16% { 104 | transform: translate3d(calc(var(--z) * 160px), calc(var(--z) * 160px), calc(var(--z) * 160px)); 105 | } 106 | 107 | 28% { 108 | opacity: 1; 109 | transform: translate3d(calc(var(--z) * 70px), calc(var(--z) * 70px), calc(var(--z) * 70px)); 110 | } 111 | 112 | 44% { 113 | transform: translate3d(calc(var(--z) * 130px), calc(var(--z) * 130px), calc(var(--z) * 130px)); 114 | } 115 | 116 | 59% { 117 | transform: translate3d(calc(var(--z) * 85px), calc(var(--z) * 85px), calc(var(--z) * 85px)); 118 | } 119 | 120 | 73% { 121 | transform: translate3d(calc(var(--z) * 110px), calc(var(--z) * 110px), calc(var(--z) * 110px)); 122 | } 123 | 124 | 88% { 125 | opacity: 1; 126 | transform: translate3d(calc(var(--z) * 90px), calc(var(--z) * 90px), calc(var(--z) * 90px)); 127 | } 128 | 129 | 100% { 130 | opacity: 1; 131 | transform: translate3d(calc(var(--z) * 100px), calc(var(--z) * 100px), calc(var(--z) * 100px)); 132 | } 133 | } -------------------------------------------------------------------------------- /design_button/nandita27/nandita27-9.css: -------------------------------------------------------------------------------- 1 | .btn { 2 | height: 4em; 3 | width: 12em; 4 | 5 | align-items: center; 6 | justify-content: center; 7 | background: transparent; 8 | border: 0px solid black; 9 | cursor: pointer; 10 | } 11 | 12 | .wrapper-flower { 13 | height: 2em; 14 | width: 8em; 15 | position: relative; 16 | background: transparent; 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | } 21 | 22 | .text { 23 | font-size: 17px; 24 | z-index: 1; 25 | color: #000; 26 | padding: 4px 12px; 27 | border-radius: 4px; 28 | background: rgba(255, 255, 255, 0.7); 29 | transition: all 0.5s ease; 30 | } 31 | 32 | .flower { 33 | display: grid; 34 | grid-template-columns: 1em 1em; 35 | position: absolute; 36 | transition: grid-template-columns 0.8s ease; 37 | } 38 | 39 | .flower1 { 40 | top: -12px; 41 | left: -13px; 42 | transform: rotate(5deg); 43 | } 44 | 45 | .flower2 { 46 | bottom: -5px; 47 | left: 8px; 48 | transform: rotate(35deg); 49 | } 50 | 51 | .flower3 { 52 | bottom: -15px; 53 | transform: rotate(0deg); 54 | } 55 | 56 | .flower4 { 57 | top: -14px; 58 | transform: rotate(15deg); 59 | } 60 | 61 | .flower5 { 62 | right: 11px; 63 | top: -3px; 64 | transform: rotate(25deg); 65 | } 66 | 67 | .flower6 { 68 | right: -15px; 69 | bottom: -15px; 70 | transform: rotate(30deg); 71 | } 72 | 73 | .petal { 74 | height: 1em; 75 | width: 1em; 76 | border-radius: 40% 70% / 7% 90%; 77 | background: linear-gradient(#07a6d7, #93e0ee); 78 | border: 0.5px solid #96d1ec; 79 | z-index: 0; 80 | transition: width 0.8s ease, height 0.8s ease; 81 | } 82 | 83 | .two { 84 | transform: rotate(90deg); 85 | } 86 | 87 | .three { 88 | transform: rotate(270deg); 89 | } 90 | 91 | .four { 92 | transform: rotate(180deg); 93 | } 94 | 95 | .btn:hover .petal { 96 | background: linear-gradient(#0761d7, #93bdee); 97 | border: 0.5px solid #96b4ec; 98 | } 99 | 100 | .btn:hover .flower { 101 | grid-template-columns: 1.5em 1.5em; 102 | } 103 | 104 | .btn:hover .flower .petal { 105 | width: 1.5em; 106 | height: 1.5em; 107 | } 108 | 109 | .btn:hover .text { 110 | background: rgba(255, 255, 255, 0.4); 111 | } 112 | 113 | .btn:hover div.flower1 { 114 | animation: 15s linear 0s normal none infinite running flower1; 115 | } 116 | 117 | @keyframes flower1 { 118 | 0% { 119 | transform: rotate(5deg); 120 | } 121 | 122 | 100% { 123 | transform: rotate(365deg); 124 | } 125 | } 126 | 127 | .btn:hover div.flower2 { 128 | animation: 13s linear 1s normal none infinite running flower2; 129 | } 130 | 131 | @keyframes flower2 { 132 | 0% { 133 | transform: rotate(35deg); 134 | } 135 | 136 | 100% { 137 | transform: rotate(-325deg); 138 | } 139 | } 140 | 141 | .btn:hover div.flower3 { 142 | animation: 16s linear 1s normal none infinite running flower3; 143 | } 144 | 145 | @keyframes flower3 { 146 | 0% { 147 | transform: rotate(0deg); 148 | } 149 | 150 | 100% { 151 | transform: rotate(360deg); 152 | } 153 | } 154 | 155 | .btn:hover div.flower4 { 156 | animation: 17s linear 1s normal none infinite running flower4; 157 | } 158 | 159 | @keyframes flower4 { 160 | 0% { 161 | transform: rotate(15deg); 162 | } 163 | 164 | 100% { 165 | transform: rotate(375deg); 166 | } 167 | } 168 | 169 | .btn:hover div.flower5 { 170 | animation: 20s linear 1s normal none infinite running flower5; 171 | } 172 | 173 | @keyframes flower5 { 174 | 0% { 175 | transform: rotate(25deg); 176 | } 177 | 178 | 100% { 179 | transform: rotate(-335deg); 180 | } 181 | } 182 | 183 | .btn:hover div.flower6 { 184 | animation: 15s linear 1s normal none infinite running flower6; 185 | } 186 | 187 | @keyframes flower6 { 188 | 0% { 189 | transform: rotate(30deg); 190 | } 191 | 192 | 100% { 193 | transform: rotate(390deg); 194 | } 195 | } 196 | -------------------------------------------------------------------------------- /design_button/pranjal.css: -------------------------------------------------------------------------------- 1 | 2 | #pranjal{ 3 | display: inline-block; 4 | padding: 20px 30px; 5 | font-size: 16px; 6 | font-weight: bold; 7 | text-align: center; 8 | text-decoration: none; 9 | cursor: pointer; 10 | border: 2px solid #fff; 11 | border-radius: 15px; 12 | color: #fff; 13 | background: linear-gradient(45deg, #6ab04c, #52bf90); 14 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 15 | transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; 16 | } 17 | 18 | 19 | #pranjal:hover { 20 | 21 | background: linear-gradient(45deg, #52bf90, #6ab04c, #7cc197); 22 | transform: scale(1.05); 23 | box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); 24 | border-color: #fff; 25 | border-radius: 50%; 26 | } 27 | 28 | 29 | #pranjal:active { 30 | transform: scale(0.95); 31 | } 32 | 33 | 34 | #pranjal.secondary { 35 | background: linear-gradient(45deg, #ff9a9e, #fad0c4); 36 | } 37 | 38 | #pranjal.disabled { 39 | cursor: not-allowed; 40 | opacity: 0.7; 41 | } 42 | 43 | -------------------------------------------------------------------------------- /design_button/rimi1.css: -------------------------------------------------------------------------------- 1 | /* tooltip settings 👇 */ 2 | 3 | .copy { 4 | /* button */ 5 | --button-bg: #353434; 6 | --button-hover-bg: #464646; 7 | --button-text-color: #CCCCCC; 8 | --button-hover-text-color: #8bb9fe; 9 | --button-border-radius: 10px; 10 | --button-diameter: 36px; 11 | --button-outline-width: 1px; 12 | --button-outline-color: rgb(141, 141, 141); 13 | /* tooltip */ 14 | --tooltip-bg: #f4f3f3; 15 | --toolptip-border-radius: 4px; 16 | --tooltip-font-family: Menlo, Roboto Mono, monospace; 17 | /* 👆 this field should not be empty */ 18 | --tooltip-font-size: 12px; 19 | /* 👆 this field should not be empty */ 20 | --tootip-text-color: rgb(50, 50, 50); 21 | --tooltip-padding-x: 7px; 22 | --tooltip-padding-y: 7px; 23 | --tooltip-offset: 8px; 24 | /* --tooltip-transition-duration: 0.3s; */ 25 | /* 👆 if you need a transition, 26 | just remove the comment, 27 | but I didn't like the transition :| */ 28 | } 29 | 30 | .copy { 31 | box-sizing: border-box; 32 | width: var(--button-diameter); 33 | height: var(--button-diameter); 34 | border-radius: var(--button-border-radius); 35 | background-color: var(--button-bg); 36 | color: var(--button-text-color); 37 | border: none; 38 | cursor: pointer; 39 | position: relative; 40 | outline: none; 41 | } 42 | 43 | .tooltip { 44 | position: absolute; 45 | opacity: 0; 46 | visibility: 0; 47 | top: 0; 48 | left: 50%; 49 | transform: translateX(-50%); 50 | white-space: nowrap; 51 | font: var(--tooltip-font-size) var(--tooltip-font-family); 52 | color: var(--tootip-text-color); 53 | background: var(--tooltip-bg); 54 | padding: var(--tooltip-padding-y) var(--tooltip-padding-x); 55 | border-radius: var(--toolptip-border-radius); 56 | pointer-events: none; 57 | transition: all var(--tooltip-transition-duration) cubic-bezier(0.68, -0.55, 0.265, 1.55); 58 | } 59 | 60 | .tooltip::before { 61 | content: attr(data-text-initial); 62 | } 63 | 64 | .tooltip::after { 65 | content: ""; 66 | position: absolute; 67 | bottom: calc(var(--tooltip-padding-y) / 2 * -1); 68 | width: var(--tooltip-padding-y); 69 | height: var(--tooltip-padding-y); 70 | background: inherit; 71 | left: 50%; 72 | transform: translateX(-50%) rotate(45deg); 73 | z-index: -999; 74 | pointer-events: none; 75 | } 76 | 77 | .copy svg { 78 | position: absolute; 79 | top: 50%; 80 | left: 50%; 81 | transform: translate(-50%, -50%); 82 | } 83 | 84 | .checkmark { 85 | display: none; 86 | } 87 | 88 | /* actions */ 89 | 90 | .copy:hover .tooltip, 91 | .copy:focus:not(:focus-visible) .tooltip { 92 | opacity: 1; 93 | visibility: visible; 94 | top: calc((100% + var(--tooltip-offset)) * -1); 95 | } 96 | 97 | .copy:focus:not(:focus-visible) .tooltip::before { 98 | content: attr(data-text-end); 99 | } 100 | 101 | .copy:focus:not(:focus-visible) .clipboard { 102 | display: none; 103 | } 104 | 105 | .copy:focus:not(:focus-visible) .checkmark { 106 | display: block; 107 | } 108 | 109 | .copy:hover, 110 | .copy:focus { 111 | background-color: var(--button-hover-bg); 112 | } 113 | 114 | .copy:active { 115 | outline: var(--button-outline-width) solid var(--button-outline-color); 116 | } 117 | 118 | .copy:hover svg { 119 | color: var(--button-hover-text-color); 120 | } -------------------------------------------------------------------------------- /design_button/rimi10.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | width: 100%; 6 | height: 100vh; 7 | display: flex; 8 | flex-direction: row; 9 | justify-content: center; 10 | align-items: center; 11 | background: #000; 12 | } 13 | 14 | .glow-on-hover { 15 | width: 220px; 16 | height: 50px; 17 | border: none; 18 | outline: none; 19 | color: #fff; 20 | background: #111; 21 | cursor: pointer; 22 | position: relative; 23 | z-index: 0; 24 | border-radius: 10px; 25 | } 26 | 27 | .glow-on-hover:before { 28 | content: ''; 29 | background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); 30 | position: absolute; 31 | top: -2px; 32 | left:-2px; 33 | background-size: 400%; 34 | z-index: -1; 35 | filter: blur(5px); 36 | width: calc(100% + 4px); 37 | height: calc(100% + 4px); 38 | animation: glowing 20s linear infinite; 39 | opacity: 0; 40 | transition: opacity .3s ease-in-out; 41 | border-radius: 10px; 42 | } 43 | 44 | .glow-on-hover:active { 45 | color: #000 46 | } 47 | 48 | .glow-on-hover:active:after { 49 | background: transparent; 50 | } 51 | 52 | .glow-on-hover:hover:before { 53 | opacity: 1; 54 | } 55 | 56 | .glow-on-hover:after { 57 | z-index: -1; 58 | content: ''; 59 | position: absolute; 60 | width: 100%; 61 | height: 100%; 62 | background: #111; 63 | left: 0; 64 | top: 0; 65 | border-radius: 10px; 66 | } 67 | 68 | @keyframes glowing { 69 | 0% { background-position: 0 0; } 70 | 50% { background-position: 400% 0; } 71 | 100% { background-position: 0 0; } 72 | } -------------------------------------------------------------------------------- /design_button/rimi11.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --size: 100px; 3 | --frames: 62; 4 | } 5 | 6 | html { 7 | background-color: #15202B; 8 | min-height: 100vh; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | user-select: none; 13 | } 14 | 15 | input { 16 | display: none; 17 | } 18 | 19 | .like { 20 | display: block; 21 | width: var(--size); 22 | height: var(--size); 23 | cursor: pointer; 24 | border-radius: 999px; 25 | overflow: visible; 26 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 27 | -webkit-tap-highlight-color: transparent; 28 | } 29 | 30 | .hearth { 31 | background-image: url('https://assets.codepen.io/23500/Hashflag-AppleEvent.svg'); 32 | background-size: calc(var(--size) * var(--frames)) var(--size); 33 | background-repeat: no-repeat; 34 | background-position-x: calc(var(--size) * (var(--frames) * -1 + 2)); 35 | background-position-y: calc(var(--size) * 0.02); 36 | width: var(--size); 37 | height: var(--size); 38 | } 39 | 40 | input:checked + .hearth { 41 | animation: like 1s steps(calc(var(--frames) - 3)); 42 | animation-fill-mode: forwards; 43 | } 44 | 45 | @keyframes like { 46 | 0% { 47 | background-position-x: 0; 48 | } 49 | 100% { 50 | background-position-x: calc(var(--size) * (var(--frames) * -1 + 3)); 51 | } 52 | } 53 | 54 | @media (hover: hover) { 55 | .like:hover { 56 | background-color: #E1255E15; 57 | .hearth { 58 | background-position-x: calc(var(--size) * (var(--frames) * -1 + 1)); 59 | } 60 | } 61 | } 62 | 63 | /* // hashflag-gallery - dribbble - twitter */ 64 | .hashflag { 65 | position: fixed; 66 | display: block; 67 | right: 114px; 68 | bottom: 20px; 69 | img { 70 | display: block; 71 | height: 28px; 72 | } 73 | } 74 | .dribbble { 75 | position: fixed; 76 | display: block; 77 | right: 20px; 78 | bottom: 20px; 79 | img { 80 | display: block; 81 | height: 28px; 82 | } 83 | } 84 | .twitter { 85 | position: fixed; 86 | display: block; 87 | right: 64px; 88 | bottom: 14px; 89 | svg { 90 | width: 32px; 91 | height: 32px; 92 | fill: #1da1f2; 93 | } 94 | } -------------------------------------------------------------------------------- /design_button/rimi12.css: -------------------------------------------------------------------------------- 1 | .box { 2 | width: 140px; 3 | height: auto; 4 | float: left; 5 | transition: .5s linear; 6 | position: relative; 7 | display: block; 8 | overflow: hidden; 9 | padding: 15px; 10 | text-align: center; 11 | margin: 0 5px; 12 | background: transparent; 13 | text-transform: uppercase; 14 | font-weight: 900; 15 | } 16 | 17 | .box:before { 18 | position: absolute; 19 | content: ''; 20 | left: 0; 21 | bottom: 0; 22 | height: 4px; 23 | width: 100%; 24 | border-bottom: 4px solid transparent; 25 | border-left: 4px solid transparent; 26 | box-sizing: border-box; 27 | transform: translateX(100%); 28 | } 29 | 30 | .box:after { 31 | position: absolute; 32 | content: ''; 33 | top: 0; 34 | left: 0; 35 | width: 100%; 36 | height: 4px; 37 | border-top: 4px solid transparent; 38 | border-right: 4px solid transparent; 39 | box-sizing: border-box; 40 | transform: translateX(-100%); 41 | } 42 | 43 | .box:hover { 44 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); 45 | } 46 | 47 | .box:hover:before { 48 | border-color: #262626; 49 | height: 100%; 50 | transform: translateX(0); 51 | transition: .3s transform linear, .3s height linear .3s; 52 | } 53 | 54 | .box:hover:after { 55 | border-color: #262626; 56 | height: 100%; 57 | transform: translateX(0); 58 | transition: .3s transform linear, .3s height linear .5s; 59 | } 60 | 61 | button { 62 | color: black; 63 | text-decoration: none; 64 | cursor: pointer; 65 | outline: none; 66 | border: none; 67 | background: transparent; 68 | } -------------------------------------------------------------------------------- /design_button/rimi2.css: -------------------------------------------------------------------------------- 1 | button { 2 | color: white; 3 | background-color: #1D4ED8; 4 | --ring-color: #93C5FD; 5 | font-weight: 500; 6 | border-radius: 0.5rem; 7 | font-size: 1rem; 8 | line-height: 2rem; 9 | padding-left: 2rem; 10 | padding-right: 2rem; 11 | padding-top: 0.7rem; 12 | padding-bottom: 0.7rem; 13 | text-align: center; 14 | margin-right: 0.5rem; 15 | display: inline-flex; 16 | align-items: center; 17 | border: none; 18 | } 19 | 20 | button:hover { 21 | background-color: #1E40AF; 22 | } 23 | 24 | button:focus { 25 | box-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); 26 | } 27 | 28 | button svg { 29 | display: inline; 30 | width: 1.3rem; 31 | height: 1.3rem; 32 | margin-right: 0.75rem; 33 | color: white; 34 | animation: spin_357 1s linear infinite; 35 | } 36 | 37 | @keyframes spin_357 { 38 | from { 39 | transform: rotate(0deg); 40 | } 41 | 42 | to { 43 | transform: rotate(360deg); 44 | } 45 | } -------------------------------------------------------------------------------- /design_button/rimi3.css: -------------------------------------------------------------------------------- 1 | .heart-container { 2 | --heart-color: rgb(255, 91, 137); 3 | position: relative; 4 | width: 50px; 5 | height: 50px; 6 | -webkit-transition: .3s; 7 | transition: .3s; 8 | } 9 | 10 | .heart-container .checkbox { 11 | position: absolute; 12 | width: 100%; 13 | height: 100%; 14 | opacity: 0; 15 | z-index: 20; 16 | cursor: pointer; 17 | } 18 | 19 | .heart-container .svg-container { 20 | width: 100%; 21 | height: 100%; 22 | display: -webkit-box; 23 | display: -ms-flexbox; 24 | display: flex; 25 | -webkit-box-pack: center; 26 | -ms-flex-pack: center; 27 | justify-content: center; 28 | -webkit-box-align: center; 29 | -ms-flex-align: center; 30 | align-items: center; 31 | } 32 | 33 | .heart-container .svg-outline, 34 | .heart-container .svg-filled { 35 | fill: var(--heart-color); 36 | position: absolute; 37 | } 38 | 39 | .heart-container .svg-filled { 40 | -webkit-animation: keyframes-svg-filled 1s; 41 | animation: keyframes-svg-filled 1s; 42 | display: none; 43 | } 44 | 45 | .heart-container .svg-celebrate { 46 | position: absolute; 47 | -webkit-animation: keyframes-svg-celebrate .5s; 48 | animation: keyframes-svg-celebrate .5s; 49 | -webkit-animation-fill-mode: forwards; 50 | animation-fill-mode: forwards; 51 | display: none; 52 | stroke: var(--heart-color); 53 | fill: var(--heart-color); 54 | stroke-width: 2px; 55 | } 56 | 57 | .heart-container .checkbox:checked~.svg-container .svg-filled { 58 | display: block 59 | } 60 | 61 | .heart-container .checkbox:checked~.svg-container .svg-celebrate { 62 | display: block 63 | } 64 | 65 | @-webkit-keyframes keyframes-svg-filled { 66 | 0% { 67 | -webkit-transform: scale(0); 68 | transform: scale(0); 69 | } 70 | 71 | 25% { 72 | -webkit-transform: scale(1.2); 73 | transform: scale(1.2); 74 | } 75 | 76 | 50% { 77 | -webkit-transform: scale(1); 78 | transform: scale(1); 79 | -webkit-filter: brightness(1.5); 80 | filter: brightness(1.5); 81 | } 82 | } 83 | 84 | @keyframes keyframes-svg-filled { 85 | 0% { 86 | -webkit-transform: scale(0); 87 | transform: scale(0); 88 | } 89 | 90 | 25% { 91 | -webkit-transform: scale(1.2); 92 | transform: scale(1.2); 93 | } 94 | 95 | 50% { 96 | -webkit-transform: scale(1); 97 | transform: scale(1); 98 | -webkit-filter: brightness(1.5); 99 | filter: brightness(1.5); 100 | } 101 | } 102 | 103 | @-webkit-keyframes keyframes-svg-celebrate { 104 | 0% { 105 | -webkit-transform: scale(0); 106 | transform: scale(0); 107 | } 108 | 109 | 50% { 110 | opacity: 1; 111 | -webkit-filter: brightness(1.5); 112 | filter: brightness(1.5); 113 | } 114 | 115 | 100% { 116 | -webkit-transform: scale(1.4); 117 | transform: scale(1.4); 118 | opacity: 0; 119 | display: none; 120 | } 121 | } 122 | 123 | @keyframes keyframes-svg-celebrate { 124 | 0% { 125 | -webkit-transform: scale(0); 126 | transform: scale(0); 127 | } 128 | 129 | 50% { 130 | opacity: 1; 131 | -webkit-filter: brightness(1.5); 132 | filter: brightness(1.5); 133 | } 134 | 135 | 100% { 136 | -webkit-transform: scale(1.4); 137 | transform: scale(1.4); 138 | opacity: 0; 139 | display: none; 140 | } 141 | } -------------------------------------------------------------------------------- /design_button/rimi4.css: -------------------------------------------------------------------------------- 1 | .container { 2 | margin: auto; 3 | color: hsl(0, 0%, 30%); 4 | font-weight: 900; 5 | font-size: 6rem; 6 | display: flex; 7 | } 8 | 9 | .toggle { 10 | width: 60px; 11 | height: 155px; 12 | background-color: hsl(0, 0%, 80%); 13 | border-radius: 1.7rem; 14 | padding: .25rem 0; 15 | cursor: pointer; 16 | display: flex; 17 | justify-content: center; 18 | transition: background-color 300ms 300ms; 19 | } 20 | 21 | .toggle__circle { 22 | width: 50px; 23 | height: 50px; 24 | background-color: hsl(0, 0%, 95%); 25 | border-radius: 50%; 26 | margin-top: calc(155px - (.25rem * 2) - 50px); 27 | transition: margin 500ms ease-in-out; 28 | } 29 | 30 | .toggle-text { 31 | display: flex; 32 | flex-direction: column; 33 | line-height: .8; 34 | } 35 | 36 | #check:checked + .toggle > .toggle__circle { 37 | margin-top: 0; 38 | } 39 | 40 | #check:checked + .toggle { 41 | background-color: #41a63c; 42 | } -------------------------------------------------------------------------------- /design_button/rimi5.css: -------------------------------------------------------------------------------- 1 | .Btn { 2 | display: flex; 3 | align-items: center; 4 | justify-content: flex-start; 5 | width: 50px; 6 | height: 50px; 7 | border: none; 8 | border-radius: 50%; 9 | cursor: pointer; 10 | position: relative; 11 | overflow: hidden; 12 | transition-duration: 0.4s; 13 | box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); 14 | background: linear-gradient(to right, #3498db, #e74c3c); 15 | } 16 | 17 | .sign { 18 | width: 100%; 19 | transition-duration: 0.4s; 20 | display: flex; 21 | align-items: center; 22 | justify-content: center; 23 | } 24 | 25 | .sign svg { 26 | width: 17px; 27 | } 28 | 29 | .sign svg path { 30 | fill: white; 31 | } 32 | 33 | .text { 34 | position: absolute; 35 | right: 0%; 36 | width: 0%; 37 | opacity: 0; 38 | color: #ecf0f1; 39 | font-size: 1.2em; 40 | font-weight: 600; 41 | transition-duration: 0.4s; 42 | } 43 | 44 | .Btn:hover { 45 | width: 150px; 46 | border-radius: 20px; 47 | transition-duration: 0.4s; 48 | background: linear-gradient(to right, #3498db, #e74c3c); 49 | } 50 | 51 | .Btn:hover .sign { 52 | width: 30%; 53 | transition-duration: 0.4s; 54 | padding-left: 12px; 55 | } 56 | 57 | .Btn:hover .text { 58 | opacity: 1; 59 | width: 70%; 60 | transition-duration: 0.4s; 61 | padding-right: 10px; 62 | } 63 | 64 | .Btn:active { 65 | transform: translate(2px, 2px); 66 | box-shadow: 0 0 0 rgba(0, 0, 0, 0.2); 67 | } 68 | -------------------------------------------------------------------------------- /design_button/rimi6.css: -------------------------------------------------------------------------------- 1 | /* === removing default button style ===*/ 2 | .button { 3 | margin: 0; 4 | height: auto; 5 | background: transparent; 6 | padding: 0; 7 | border: none; 8 | cursor: pointer; 9 | } 10 | 11 | /* button styling */ 12 | .button { 13 | --border-right: 6px; 14 | --text-stroke-color: rgba(255,255,255,0.6); 15 | --animation-color: #37FF8B; 16 | --fs-size: 2em; 17 | letter-spacing: 3px; 18 | text-decoration: none; 19 | font-size: var(--fs-size); 20 | font-family: "Arial"; 21 | position: relative; 22 | text-transform: uppercase; 23 | color: transparent; 24 | -webkit-text-stroke: 1px var(--text-stroke-color); 25 | } 26 | /* this is the text, when you hover on button */ 27 | .hover-text { 28 | position: absolute; 29 | box-sizing: border-box; 30 | content: attr(data-text); 31 | color: var(--animation-color); 32 | width: 0%; 33 | inset: 0; 34 | border-right: var(--border-right) solid var(--animation-color); 35 | overflow: hidden; 36 | transition: 0.5s; 37 | -webkit-text-stroke: 1px var(--animation-color); 38 | } 39 | /* hover */ 40 | .button:hover .hover-text { 41 | width: 100%; 42 | filter: drop-shadow(0 0 23px var(--animation-color)) 43 | } -------------------------------------------------------------------------------- /design_button/rimi7.css: -------------------------------------------------------------------------------- 1 | button { 2 | color: #090909; 3 | padding: 0.7em 1.7em; 4 | font-size: 18px; 5 | border-radius: 0.5em; 6 | background: #e8e8e8; 7 | cursor: pointer; 8 | border: 1px solid #e8e8e8; 9 | transition: all 0.3s; 10 | box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff; 11 | } 12 | 13 | button:hover { 14 | border: 1px solid white; 15 | } 16 | 17 | button:active { 18 | box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff; 19 | } 20 | -------------------------------------------------------------------------------- /design_button/rimi8.css: -------------------------------------------------------------------------------- 1 | button { 2 | position: relative; 3 | padding: 12px 35px; 4 | background: #fec195; 5 | font-size: 17px; 6 | font-weight: 500; 7 | color: #181818; 8 | border: 3px solid #fec195; 9 | border-radius: 8px; 10 | box-shadow: 0 0 0 #fec1958c; 11 | transition: all 0.3s ease-in-out; 12 | cursor: pointer; 13 | } 14 | 15 | .star-1 { 16 | position: absolute; 17 | top: 20%; 18 | left: 20%; 19 | width: 25px; 20 | height: auto; 21 | filter: drop-shadow(0 0 0 #fffdef); 22 | z-index: -5; 23 | transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96); 24 | } 25 | 26 | .star-2 { 27 | position: absolute; 28 | top: 45%; 29 | left: 45%; 30 | width: 15px; 31 | height: auto; 32 | filter: drop-shadow(0 0 0 #fffdef); 33 | z-index: -5; 34 | transition: all 1s cubic-bezier(0, 0.4, 0, 1.01); 35 | } 36 | 37 | .star-3 { 38 | position: absolute; 39 | top: 40%; 40 | left: 40%; 41 | width: 5px; 42 | height: auto; 43 | filter: drop-shadow(0 0 0 #fffdef); 44 | z-index: -5; 45 | transition: all 1s cubic-bezier(0, 0.4, 0, 1.01); 46 | } 47 | 48 | .star-4 { 49 | position: absolute; 50 | top: 20%; 51 | left: 40%; 52 | width: 8px; 53 | height: auto; 54 | filter: drop-shadow(0 0 0 #fffdef); 55 | z-index: -5; 56 | transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01); 57 | } 58 | 59 | .star-5 { 60 | position: absolute; 61 | top: 25%; 62 | left: 45%; 63 | width: 15px; 64 | height: auto; 65 | filter: drop-shadow(0 0 0 #fffdef); 66 | z-index: -5; 67 | transition: all 0.6s cubic-bezier(0, 0.4, 0, 1.01); 68 | } 69 | 70 | .star-6 { 71 | position: absolute; 72 | top: 5%; 73 | left: 50%; 74 | width: 5px; 75 | height: auto; 76 | filter: drop-shadow(0 0 0 #fffdef); 77 | z-index: -5; 78 | transition: all 0.8s ease; 79 | } 80 | 81 | button:hover { 82 | background: transparent; 83 | color: #fec195; 84 | box-shadow: 0 0 25px #fec1958c; 85 | } 86 | 87 | button:hover .star-1 { 88 | position: absolute; 89 | top: -80%; 90 | left: -30%; 91 | width: 25px; 92 | height: auto; 93 | filter: drop-shadow(0 0 10px #fffdef); 94 | z-index: 2; 95 | } 96 | 97 | button:hover .star-2 { 98 | position: absolute; 99 | top: -25%; 100 | left: 10%; 101 | width: 15px; 102 | height: auto; 103 | filter: drop-shadow(0 0 10px #fffdef); 104 | z-index: 2; 105 | } 106 | 107 | button:hover .star-3 { 108 | position: absolute; 109 | top: 55%; 110 | left: 25%; 111 | width: 5px; 112 | height: auto; 113 | filter: drop-shadow(0 0 10px #fffdef); 114 | z-index: 2; 115 | } 116 | 117 | button:hover .star-4 { 118 | position: absolute; 119 | top: 30%; 120 | left: 80%; 121 | width: 8px; 122 | height: auto; 123 | filter: drop-shadow(0 0 10px #fffdef); 124 | z-index: 2; 125 | } 126 | 127 | button:hover .star-5 { 128 | position: absolute; 129 | top: 25%; 130 | left: 115%; 131 | width: 15px; 132 | height: auto; 133 | filter: drop-shadow(0 0 10px #fffdef); 134 | z-index: 2; 135 | } 136 | 137 | button:hover .star-6 { 138 | position: absolute; 139 | top: 5%; 140 | left: 60%; 141 | width: 5px; 142 | height: auto; 143 | filter: drop-shadow(0 0 10px #fffdef); 144 | z-index: 2; 145 | } 146 | 147 | .fil0 { 148 | fill: #fffdef; 149 | } 150 | -------------------------------------------------------------------------------- /design_button/rimi9.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap'); 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | body{ 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | height: 100vh; 12 | background: #050801; 13 | font-family: 'Raleway', sans-serif; 14 | font-weight: bold; 15 | } 16 | a{ 17 | position: relative; 18 | display: inline-block; 19 | padding: 25px 30px; 20 | margin: 40px 0; 21 | color: #03e9f4; 22 | text-decoration: none; 23 | text-transform: uppercase; 24 | transition: 0.5s; 25 | letter-spacing: 4px; 26 | overflow: hidden; 27 | margin-right: 50px; 28 | 29 | } 30 | a:hover{ 31 | background: #03e9f4; 32 | color: #050801; 33 | box-shadow: 0 0 5px #03e9f4, 34 | 0 0 25px #03e9f4, 35 | 0 0 50px #03e9f4, 36 | 0 0 200px #03e9f4; 37 | -webkit-box-reflect:below 1px linear-gradient(transparent, #0005); 38 | } 39 | a:nth-child(1){ 40 | filter: hue-rotate(270deg); 41 | } 42 | a:nth-child(2){ 43 | filter: hue-rotate(110deg); 44 | } 45 | a span{ 46 | position: absolute; 47 | display: block; 48 | } 49 | a span:nth-child(1){ 50 | top: 0; 51 | left: 0; 52 | width: 100%; 53 | height: 2px; 54 | background: linear-gradient(90deg,transparent,#03e9f4); 55 | animation: animate1 1s linear infinite; 56 | } 57 | @keyframes animate1{ 58 | 0%{ 59 | left: -100%; 60 | } 61 | 50%,100%{ 62 | left: 100%; 63 | } 64 | } 65 | a span:nth-child(2){ 66 | top: -100%; 67 | right: 0; 68 | width: 2px; 69 | height: 100%; 70 | background: linear-gradient(180deg,transparent,#03e9f4); 71 | animation: animate2 1s linear infinite; 72 | animation-delay: 0.25s; 73 | } 74 | @keyframes animate2{ 75 | 0%{ 76 | top: -100%; 77 | } 78 | 50%,100%{ 79 | top: 100%; 80 | } 81 | } 82 | a span:nth-child(3){ 83 | bottom: 0; 84 | right: 0; 85 | width: 100%; 86 | height: 2px; 87 | background: linear-gradient(270deg,transparent,#03e9f4); 88 | animation: animate3 1s linear infinite; 89 | animation-delay: 0.50s; 90 | } 91 | @keyframes animate3{ 92 | 0%{ 93 | right: -100%; 94 | } 95 | 50%,100%{ 96 | right: 100%; 97 | } 98 | } 99 | 100 | 101 | a span:nth-child(4){ 102 | bottom: -100%; 103 | left: 0; 104 | width: 2px; 105 | height: 100%; 106 | background: linear-gradient(360deg,transparent,#03e9f4); 107 | animation: animate4 1s linear infinite; 108 | animation-delay: 0.75s; 109 | } 110 | @keyframes animate4{ 111 | 0%{ 112 | bottom: -100%; 113 | } 114 | 50%,100%{ 115 | bottom: 100%; 116 | } 117 | } -------------------------------------------------------------------------------- /design_button/rupalimkrishnan-1.css: -------------------------------------------------------------------------------- 1 | #rupalimkrishnan-1 { 2 | height: 50px; 3 | min-width: 140px; 4 | background: linear-gradient( 5 | 94.5deg, 6 | rgb(255, 235, 104) -1.2%, 7 | rgb(61, 247, 255) 119.2% 8 | ); 9 | cursor: pointer; 10 | padding: 5px 10px; 11 | text-transform: uppercase; 12 | margin-bottom: 10px; 13 | border-color: #bae8e8; 14 | text-align: center; 15 | box-shadow: 5px 5px 5px aquamarine; 16 | position: relative; 17 | border-radius: 15px; 18 | font-weight: bolder; 19 | transition: all 0.15s ease; 20 | } 21 | #rupalimkrishnan-1:hover { 22 | color: black; 23 | background: linear-gradient( 24 | 68.6deg, 25 | rgb(252, 165, 241) 1.8%, 26 | rgb(181, 255, 255) 100.5% 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /design_button/shahilaf_01.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Lato); 2 | body { 3 | /* display: flex; */ 4 | justify-content: center; 5 | align-items: center; 6 | text-align: center; 7 | background: #1A1E23; 8 | } 9 | 10 | .btn { 11 | --hue: 190; 12 | --ease-in-duration: 0.25s; 13 | --ease-out-duration: 0.65s; 14 | --ease-out-delay: var(--ease-in-duration); 15 | position: relative; 16 | padding: 1rem 3rem; 17 | font-size: 1rem; 18 | line-height: 1.5; 19 | color: white; 20 | text-decoration: none; 21 | background-color: hsl(var(--hue), 100%, 41%); 22 | border: 1px solid hsl(var(--hue), 100%, 41%); 23 | outline: transparent; 24 | cursor: pointer; 25 | user-select: none; 26 | white-space: nowrap; 27 | transition: 0.25s; 28 | } 29 | .btn:hover { 30 | background: hsl(var(--hue), 100%, 31%); 31 | } 32 | .btn-primary { 33 | --hue: 171; 34 | } 35 | .btn-ghost { 36 | color: hsl(var(--hue), 100%, 41%); 37 | background-color: transparent; 38 | border-color: hsl(var(--hue), 100%, 41%); 39 | } 40 | .btn-ghost:hover { 41 | color: white; 42 | } 43 | .btn-multiple-border-stroke { 44 | border-color: transparent; 45 | } 46 | .btn-multiple-border-stroke .btn-borders-group { 47 | position: absolute; 48 | top: 0; 49 | left: 0; 50 | display: flex; 51 | justify-content: center; 52 | align-items: center; 53 | width: 100%; 54 | height: 100%; 55 | border: 1px solid hsla(var(--hue), 100%, 41%, 0.35); 56 | } 57 | .btn-multiple-border-stroke .btn-borders-group:nth-child(1) { 58 | left: -8px; 59 | padding: 0 8px; 60 | } 61 | .btn-multiple-border-stroke .btn-borders-group:nth-child(2) { 62 | top: -8px; 63 | padding: 8px 0; 64 | } 65 | .btn-multiple-border-stroke .btn-borders-group:nth-child(3) { 66 | top: -4px; 67 | left: -4px; 68 | padding: 4px; 69 | } 70 | .btn-multiple-border-stroke .btn-borders-group .border-top { 71 | position: absolute; 72 | top: 0; 73 | width: 100%; 74 | height: 1px; 75 | background: hsl(var(--hue), 100%, 41%); 76 | transform: scaleX(0); 77 | transform-origin: left; 78 | } 79 | .btn-multiple-border-stroke .btn-borders-group .border-right { 80 | position: absolute; 81 | right: 0; 82 | width: 1px; 83 | height: 100%; 84 | background: hsl(var(--hue), 100%, 41%); 85 | transform: scaleY(0); 86 | transform-origin: bottom; 87 | } 88 | .btn-multiple-border-stroke .btn-borders-group .border-bottom { 89 | position: absolute; 90 | bottom: 0; 91 | width: 100%; 92 | height: 1px; 93 | background: hsl(var(--hue), 100%, 41%); 94 | transform: scaleX(0); 95 | transform-origin: left; 96 | } 97 | .btn-multiple-border-stroke .btn-borders-group .border-left { 98 | position: absolute; 99 | left: 0; 100 | width: 1px; 101 | height: 100%; 102 | background: hsl(var(--hue), 100%, 41%); 103 | transform: scaleY(0); 104 | transform-origin: bottom; 105 | } 106 | .btn-multiple-border-stroke .btn-borders-group .border-left { 107 | transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1); 108 | } 109 | .btn-multiple-border-stroke .btn-borders-group .border-bottom { 110 | transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1); 111 | } 112 | .btn-multiple-border-stroke .btn-borders-group .border-right { 113 | transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0); 114 | } 115 | .btn-multiple-border-stroke .btn-borders-group .border-top { 116 | transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0); 117 | } 118 | .btn-multiple-border-stroke:hover { 119 | color: hsl(var(--hue), 100%, 41%); 120 | background: transparent; 121 | } 122 | .btn-multiple-border-stroke:hover .border-top, 123 | .btn-multiple-border-stroke:hover .border-bottom { 124 | transform: scaleX(1); 125 | } 126 | .btn-multiple-border-stroke:hover .border-left, 127 | .btn-multiple-border-stroke:hover .border-right { 128 | transform: scaleY(1); 129 | } 130 | .btn-multiple-border-stroke:hover .border-left { 131 | transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0); 132 | } 133 | .btn-multiple-border-stroke:hover .border-bottom { 134 | transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0); 135 | } 136 | .btn-multiple-border-stroke:hover .border-right { 137 | transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1); 138 | } 139 | .btn-multiple-border-stroke:hover .border-top { 140 | transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1); 141 | } -------------------------------------------------------------------------------- /design_button/shikha.css: -------------------------------------------------------------------------------- 1 | .box-main #shikha{ 2 | background: linear-gradient(to bottom, #cb1515, #600183); 3 | border-radius: 50%; 4 | position: center; 5 | border-style: none; 6 | box-sizing: border-box; 7 | top: 0; 8 | left: 0px; 9 | width: 250px; 10 | height: 50px; 11 | margin: 0; 12 | display: flex; 13 | position: relative; 14 | justify-content: center; 15 | align-items: center; 16 | color: #fff; 17 | z-index: 0; 18 | text-decoration: none; 19 | font-weight: bold; 20 | } 21 | .box-main #shikha:hover span:nth-child(1){ 22 | filter: blur(7px); 23 | } 24 | .box-main #shikha:hover span:nth-child(2){ 25 | filter: blur(14px); 26 | } 27 | .box-main #shikha:hover{ 28 | background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0); 29 | animation: rotate 1.5s linear infinite; 30 | } 31 | @keyframes rotate { 32 | 0%{ 33 | filter: hue-rotate(0deg); 34 | } 35 | 100%{ 36 | filter: hue-rotate(360deg); 37 | } 38 | } 39 | @media (max-width: 640px){ 40 | .box-main #shikha{ 41 | flex-wrap: wrap; 42 | flex-direction: column; 43 | } 44 | .box-main #shikha{ 45 | margin: 50px 0; 46 | } 47 | } -------------------------------------------------------------------------------- /design_button/swarnade-1.css: -------------------------------------------------------------------------------- 1 | #swarnade-1 { 2 | background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%); 3 | border-radius: 8px; 4 | border-style: none; 5 | box-sizing: border-box; 6 | color: #FFFFFF; 7 | cursor: pointer; 8 | flex-shrink: 0; 9 | font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif; 10 | font-size: 16px; 11 | font-weight: 500; 12 | padding: 0 1.6rem; 13 | text-align: center; 14 | text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px; 15 | transition: all .5s; 16 | user-select: none; 17 | -webkit-user-select: none; 18 | touch-action: manipulation; 19 | height: 60px; 20 | width: 150px; 21 | } 22 | 23 | #swarnade-1:hover { 24 | box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px; 25 | transition-duration: .1s; 26 | } 27 | 28 | @media (min-width: 768px) { 29 | #swarnade-1 { 30 | padding: 0 2.6rem; 31 | } 32 | } -------------------------------------------------------------------------------- /design_button/swarnade-10.css: -------------------------------------------------------------------------------- 1 | 2 | #swarnade-10 { 3 | height: 60px; 4 | width: 150px; 5 | --c: #fff; 6 | /* text color */ 7 | background: linear-gradient(90deg, #0000 33%, #fff5, #0000 67%) var(--_p,100%)/300% no-repeat, 8 | #004dff; 9 | /* background color */ 10 | color: #0000; 11 | border: none; 12 | transform: perspective(500px) rotateY(calc(20deg*var(--_i,-1))); 13 | text-shadow: calc(var(--_i,-1)* 0.08em) -.01em 0 var(--c), 14 | calc(var(--_i,-1)*-0.08em) .01em 2px #0004; 15 | outline-offset: .1em; 16 | transition: 0.3s; 17 | } 18 | 19 | #swarnade-10:hover, 20 | #swarnade-10:focus-visible { 21 | --_p: 0%; 22 | --_i: 1; 23 | } 24 | 25 | #swarnade-10:active { 26 | text-shadow: none; 27 | color: var(--c); 28 | box-shadow: inset 0 0 9e9q #0005; 29 | transition: 0s; 30 | } 31 | 32 | #swarnade-10 { 33 | font-weight: bold; 34 | font-size: 2rem; 35 | margin: 0; 36 | cursor: pointer; 37 | padding: .1em .3em; 38 | } -------------------------------------------------------------------------------- /design_button/swarnade-11.css: -------------------------------------------------------------------------------- 1 | #swarnade-11 { 2 | background-color: #c2fbd7; 3 | border-radius: 100px; 4 | box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px; 5 | color: green; 6 | cursor: pointer; 7 | display: inline-block; 8 | font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif; 9 | padding: 7px 20px; 10 | text-align: center; 11 | text-decoration: none; 12 | transition: all 250ms; 13 | border: 0; 14 | font-size: 16px; 15 | user-select: none; 16 | -webkit-user-select: none; 17 | touch-action: manipulation; 18 | height: 60px; 19 | width: 150px; 20 | } 21 | 22 | #swarnade-11:hover { 23 | box-shadow: rgba(44,187,99,.35) 0 -25px 18px -14px inset,rgba(44,187,99,.25) 0 1px 2px,rgba(44,187,99,.25) 0 2px 4px,rgba(44,187,99,.25) 0 4px 8px,rgba(44,187,99,.25) 0 8px 16px,rgba(44,187,99,.25) 0 16px 32px; 24 | transform: scale(1.05) rotate(-1deg); 25 | } 26 | -------------------------------------------------------------------------------- /design_button/swarnade-2.css: -------------------------------------------------------------------------------- 1 | #swarnade-2, 2 | #swarnade-2:after { 3 | width: 150px; 4 | height: 156px; 5 | line-height: 208px; 6 | font-size: 20px; 7 | font-family: 'Bebas Neue', sans-serif; 8 | background: linear-gradient(45deg, transparent 5%, #FF013C 5%); 9 | border: 0; 10 | color: #fff; 11 | letter-spacing: 3px; 12 | box-shadow: 6px 0px 0px #00E6F6; 13 | outline: transparent; 14 | position: relative; 15 | user-select: none; 16 | -webkit-user-select: none; 17 | touch-action: manipulation; 18 | } 19 | 20 | #swarnade-2:after { 21 | --slice-0: inset(50% 50% 50% 50%); 22 | --slice-1: inset(80% -6px 0 0); 23 | --slice-2: inset(50% -6px 30% 0); 24 | --slice-3: inset(10% -6px 85% 0); 25 | --slice-4: inset(40% -6px 43% 0); 26 | --slice-5: inset(80% -6px 5% 0); 27 | 28 | content: 'ALTERNATE TEXT'; 29 | display: block; 30 | position: absolute; 31 | top: 0; 32 | left: 0; 33 | right: 0; 34 | bottom: 0; 35 | background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%); 36 | text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6; 37 | clip-path: var(--slice-0); 38 | } 39 | 40 | #swarnade-2:hover:after { 41 | animation: 1s glitch; 42 | animation-timing-function: steps(2, end); 43 | } 44 | 45 | @keyframes glitch { 46 | 0% { 47 | clip-path: var(--slice-1); 48 | transform: translate(-20px, -10px); 49 | } 50 | 10% { 51 | clip-path: var(--slice-3); 52 | transform: translate(10px, 10px); 53 | } 54 | 20% { 55 | clip-path: var(--slice-1); 56 | transform: translate(-10px, 10px); 57 | } 58 | 30% { 59 | clip-path: var(--slice-3); 60 | transform: translate(0px, 5px); 61 | } 62 | 40% { 63 | clip-path: var(--slice-2); 64 | transform: translate(-5px, 0px); 65 | } 66 | 50% { 67 | clip-path: var(--slice-3); 68 | transform: translate(5px, 0px); 69 | } 70 | 60% { 71 | clip-path: var(--slice-4); 72 | transform: translate(5px, 10px); 73 | } 74 | 70% { 75 | clip-path: var(--slice-2); 76 | transform: translate(-10px, 10px); 77 | } 78 | 80% { 79 | clip-path: var(--slice-5); 80 | transform: translate(20px, -10px); 81 | } 82 | 90% { 83 | clip-path: var(--slice-1); 84 | transform: translate(-10px, 0px); 85 | } 86 | 100% { 87 | clip-path: var(--slice-1); 88 | transform: translate(0); 89 | } 90 | } 91 | 92 | @media (min-width: 768px) { 93 | #swarnade-2, 94 | #swarnade-2:after { 95 | width: 200px; 96 | height: 86px; 97 | line-height: 88px; 98 | } 99 | } -------------------------------------------------------------------------------- /design_button/swarnade-3.css: -------------------------------------------------------------------------------- 1 | #swarnade-3 { 2 | align-items: center; 3 | background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB); 4 | border: 0; 5 | border-radius: 8px; 6 | box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px; 7 | box-sizing: border-box; 8 | color: #FFFFFF; 9 | display: flex; 10 | font-family: Phantomsans, sans-serif; 11 | font-size: 20px; 12 | justify-content: center; 13 | line-height: 1em; 14 | text-decoration: none; 15 | user-select: none; 16 | -webkit-user-select: none; 17 | touch-action: manipulation; 18 | white-space: nowrap; 19 | cursor: pointer; 20 | height: 60px; 21 | width: 150px; 22 | } 23 | 24 | #swarnade-3:active, 25 | #swarnade-3:hover { 26 | outline: 0; 27 | } 28 | 29 | #swarnade-3 span { 30 | background-color: rgb(5, 6, 45); 31 | padding: 16px 24px; 32 | border-radius: 6px; 33 | width: 100%; 34 | height: 100%; 35 | transition: 300ms; 36 | } 37 | 38 | #swarnade-3:hover span { 39 | background: none; 40 | } 41 | 42 | @media (max-width: 768px) { 43 | #swarnade-3 { 44 | position:relative; 45 | left: 28%; 46 | width: 30%; 47 | } 48 | } -------------------------------------------------------------------------------- /design_button/swarnade-4.css: -------------------------------------------------------------------------------- 1 | #swarnade-4 { 2 | appearance: none; 3 | background-color: #FFFFFF; 4 | border-radius: 40em; 5 | border-style: none; 6 | box-shadow: #ADCFFF 0 -12px 6px inset; 7 | box-sizing: border-box; 8 | color: #000000; 9 | cursor: pointer; 10 | display: inline-block; 11 | font-family: -apple-system,sans-serif; 12 | font-size: 1.2rem; 13 | font-weight: 700; 14 | letter-spacing: -.24px; 15 | margin: 0; 16 | outline: none; 17 | padding: 1rem 1.3rem; 18 | quotes: auto; 19 | text-align: center; 20 | text-decoration: none; 21 | transition: all .15s; 22 | user-select: none; 23 | -webkit-user-select: none; 24 | touch-action: manipulation; 25 | height: 60px; 26 | width: 150px; 27 | } 28 | 29 | #swarnade-4:hover { 30 | background-color: #FFC229; 31 | box-shadow: #FF6314 0 -6px 8px inset; 32 | transform: scale(1.125); 33 | } 34 | 35 | #swarnade-4:active { 36 | transform: scale(1.025); 37 | } 38 | 39 | @media (min-width: 768px) { 40 | #swarnade-4 { 41 | font-size: 1.5rem; 42 | padding: .75rem 2rem; 43 | } 44 | } 45 | 46 | 47 | -------------------------------------------------------------------------------- /design_button/swarnade-5.css: -------------------------------------------------------------------------------- 1 | #swarnade-5 { 2 | align-items: center; 3 | appearance: none; 4 | background-clip: padding-box; 5 | background-color: initial; 6 | background-image: none; 7 | border-style: none; 8 | box-sizing: border-box; 9 | color: #fff; 10 | cursor: pointer; 11 | display: inline-block; 12 | flex-direction: row; 13 | flex-shrink: 0; 14 | font-family: Eina01,sans-serif; 15 | font-size: 16px; 16 | font-weight: 800; 17 | justify-content: center; 18 | line-height: 24px; 19 | margin: 0; 20 | min-height: 64px; 21 | outline: none; 22 | overflow: visible; 23 | padding: 19px 26px; 24 | pointer-events: auto; 25 | position: relative; 26 | text-align: center; 27 | text-decoration: none; 28 | text-transform: none; 29 | user-select: none; 30 | -webkit-user-select: none; 31 | touch-action: manipulation; 32 | vertical-align: middle; 33 | word-break: keep-all; 34 | z-index: 0; 35 | height: 60px; 36 | width: 150px; 37 | } 38 | 39 | @media (min-width: 768px) { 40 | #swarnade-5 { 41 | padding: 19px 32px; 42 | } 43 | } 44 | 45 | #swarnade-5:before, 46 | #swarnade-5:after { 47 | border-radius: 80px; 48 | } 49 | 50 | #swarnade-5:before { 51 | background-image: linear-gradient(92.83deg, #ff7426 0, #f93a13 100%); 52 | content: ""; 53 | display: block; 54 | height: 100%; 55 | left: 0; 56 | overflow: hidden; 57 | position: absolute; 58 | top: 0; 59 | width: 100%; 60 | z-index: -2; 61 | } 62 | 63 | #swarnade-5:after { 64 | background-color: initial; 65 | background-image: linear-gradient(#541a0f 0, #0c0d0d 100%); 66 | bottom: 4px; 67 | content: ""; 68 | display: block; 69 | left: 4px; 70 | overflow: hidden; 71 | position: absolute; 72 | right: 4px; 73 | top: 4px; 74 | transition: all 100ms ease-out; 75 | z-index: -1; 76 | } 77 | 78 | #swarnade-5:hover:not(:disabled):before { 79 | background: linear-gradient(92.83deg, rgb(255, 116, 38) 0%, rgb(249, 58, 19) 100%); 80 | } 81 | 82 | #swarnade-5:hover:not(:disabled):after { 83 | bottom: 0; 84 | left: 0; 85 | right: 0; 86 | top: 0; 87 | transition-timing-function: ease-in; 88 | opacity: 0; 89 | } 90 | 91 | #swarnade-5:active:not(:disabled) { 92 | color: #ccc; 93 | } 94 | 95 | #swarnade-5:active:not(:disabled):before { 96 | background-image: linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), linear-gradient(92.83deg, #ff7426 0, #f93a13 100%); 97 | } 98 | 99 | #swarnade-5:active:not(:disabled):after { 100 | background-image: linear-gradient(#541a0f 0, #0c0d0d 100%); 101 | bottom: 4px; 102 | left: 4px; 103 | right: 4px; 104 | top: 4px; 105 | } 106 | 107 | #swarnade-5:disabled { 108 | cursor: default; 109 | opacity: .24; 110 | } 111 | -------------------------------------------------------------------------------- /design_button/swarnade-6.css: -------------------------------------------------------------------------------- 1 | #swarnade-6 { 2 | --b: 3px; /* border thickness */ 3 | --s: 0.45em; /* size of the corner */ 4 | --color: white; 5 | 6 | padding: calc(0.5em + var(--s)) calc(0.9em + var(--s)); 7 | color: var(--color); 8 | --_p: var(--s); 9 | background: conic-gradient( 10 | from 90deg at var(--b) var(--b), 11 | #0000 90deg, 12 | var(--color) 0 13 | ) 14 | var(--_p) var(--_p) / calc(100% - var(--b) - 2 * var(--_p)) 15 | calc(100% - var(--b) - 2 * var(--_p)); 16 | transition: 0.3s linear, color 0s, background-color 0s; 17 | outline: var(--b) solid #0000; 18 | outline-offset: 0.6em; 19 | font-size: 16px; 20 | 21 | border: 0; 22 | 23 | user-select: none; 24 | -webkit-user-select: none; 25 | touch-action: manipulation; 26 | height: 60px; 27 | width: 150px; 28 | } 29 | 30 | #swarnade-6:hover, 31 | #swarnade-6:focus-visible { 32 | --_p: 0px; 33 | outline-color: var(--color); 34 | outline-offset: 0.05em; 35 | } 36 | 37 | #swarnade-6:active { 38 | background: var(--color); 39 | color: #fff; 40 | } 41 | -------------------------------------------------------------------------------- /design_button/swarnade-7.css: -------------------------------------------------------------------------------- 1 | #swarnade-7 { 2 | padding: 0.6em 2em; 3 | border: none; 4 | outline: none; 5 | color: rgb(255, 255, 255); 6 | background: #111; 7 | cursor: pointer; 8 | position: relative; 9 | z-index: 0; 10 | border-radius: 10px; 11 | user-select: none; 12 | -webkit-user-select: none; 13 | touch-action: manipulation; 14 | height: 60px; 15 | width: 150px; 16 | } 17 | 18 | #swarnade-7:before { 19 | content: ""; 20 | background: linear-gradient( 21 | 45deg, 22 | #ff0000, 23 | #ff7300, 24 | #fffb00, 25 | #48ff00, 26 | #00ffd5, 27 | #002bff, 28 | #7a00ff, 29 | #ff00c8, 30 | #ff0000 31 | ); 32 | position: absolute; 33 | top: -2px; 34 | left: -2px; 35 | background-size: 400%; 36 | z-index: -1; 37 | filter: blur(5px); 38 | -webkit-filter: blur(5px); 39 | width: calc(100% + 4px); 40 | height: calc(100% + 4px); 41 | animation: glowing-button-85 20s linear infinite; 42 | transition: opacity 0.3s ease-in-out; 43 | border-radius: 10px; 44 | } 45 | 46 | @keyframes glowing-button-85 { 47 | 0% { 48 | background-position: 0 0; 49 | } 50 | 50% { 51 | background-position: 400% 0; 52 | } 53 | 100% { 54 | background-position: 0 0; 55 | } 56 | } 57 | 58 | #swarnade-7:after { 59 | z-index: -1; 60 | content: ""; 61 | position: absolute; 62 | width: 100%; 63 | height: 100%; 64 | background: #222; 65 | left: 0; 66 | top: 0; 67 | border-radius: 10px; 68 | } 69 | -------------------------------------------------------------------------------- /design_button/swarnade-8.css: -------------------------------------------------------------------------------- 1 | #swarnade-8 { 2 | all: unset; 3 | height: 60px; 4 | width: 150px; 5 | font-size: 16px; 6 | background: transparent; 7 | border: none; 8 | position: relative; 9 | color: #f0f0f0; 10 | cursor: pointer; 11 | z-index: 1; 12 | padding: 10px 20px; 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | white-space: nowrap; 17 | user-select: none; 18 | -webkit-user-select: none; 19 | touch-action: manipulation; 20 | } 21 | 22 | #swarnade-8::after, 23 | #swarnade-8::before { 24 | content: ''; 25 | position: absolute; 26 | bottom: 0; 27 | right: 0; 28 | z-index: -99999; 29 | transition: all .4s; 30 | } 31 | 32 | #swarnade-8::before { 33 | transform: translate(0%, 0%); 34 | width: 100%; 35 | height: 100%; 36 | background: #28282d; 37 | border-radius: 10px; 38 | } 39 | 40 | #swarnade-8::after { 41 | transform: translate(10px, 10px); 42 | width: 35px; 43 | height: 35px; 44 | background: #ffffff15; 45 | backdrop-filter: blur(5px); 46 | -webkit-backdrop-filter: blur(5px); 47 | border-radius: 50px; 48 | } 49 | 50 | #swarnade-8:hover::before { 51 | transform: translate(5%, 20%); 52 | width: 110%; 53 | height: 110%; 54 | } 55 | 56 | #swarnade-8:hover::after { 57 | border-radius: 10px; 58 | transform: translate(0, 0); 59 | width: 100%; 60 | height: 100%; 61 | } 62 | 63 | #swarnade-8:active::after { 64 | transition: 0s; 65 | transform: translate(0, 5%); 66 | } 67 | -------------------------------------------------------------------------------- /design_button/swarnade-9.css: -------------------------------------------------------------------------------- 1 | 2 | /* CSS */ 3 | #swarnade-9 { 4 | height: 60px; 5 | width: 150px; 6 | font-family: "Open Sans", sans-serif; 7 | font-size: 16px; 8 | letter-spacing: 2px; 9 | text-decoration: none; 10 | text-transform: uppercase; 11 | color: red; 12 | cursor: pointer; 13 | border: 3px solid; 14 | padding: 0.25em 0.5em; 15 | box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px; 16 | position: relative; 17 | user-select: none; 18 | -webkit-user-select: none; 19 | touch-action: manipulation; 20 | } 21 | 22 | #swarnade-9:active { 23 | box-shadow: 0px 0px 0px 0px; 24 | top: 5px; 25 | left: 5px; 26 | } 27 | 28 | @media (min-width: 768px) { 29 | #swarnade-9 { 30 | padding: 0.25em 0.75em; 31 | } 32 | } -------------------------------------------------------------------------------- /design_button/swarnade.css: -------------------------------------------------------------------------------- 1 | #swarnade { 2 | background-color: #EA4C89; 3 | border-radius: 8px; 4 | border-style: none; 5 | box-sizing: border-box; 6 | color: #FFFFFF; 7 | cursor: pointer; 8 | display: inline-block; 9 | font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif; 10 | font-size: 14px; 11 | font-weight: 500; 12 | height: 60px; 13 | line-height: 20px; 14 | list-style: none; 15 | margin: 0; 16 | outline: none; 17 | padding: 10px 16px; 18 | position: relative; 19 | text-align: center; 20 | text-decoration: none; 21 | transition: color 100ms; 22 | vertical-align: baseline; 23 | user-select: none; 24 | -webkit-user-select: none; 25 | touch-action: manipulation; 26 | width: 150px; 27 | } 28 | .swarnade:hover, 29 | .swarnade:focus { 30 | background-color: #F082AC; 31 | } 32 | 33 | 34 | /* CSS */ 35 | -------------------------------------------------------------------------------- /design_button/v.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swarnade/webdesign-switch/1e10060c3f8dac9825731ad6700bc5460e544844/design_button/v.css -------------------------------------------------------------------------------- /design_button/vishal.css: -------------------------------------------------------------------------------- 1 | .h{ 2 | background: #efefef; 3 | height:85px; 4 | padding-top:0.9em; 5 | margin-top: -2em; 6 | margin-bottom: -1.5em; 7 | width:285px; 8 | margin-left: -1.85em; 9 | justify-content: center; 10 | align-items: center; 11 | } 12 | 13 | .btn80 { 14 | padding: 1em 1em; 15 | background: #efefef; 16 | border: none; 17 | border-radius: .5rem; 18 | color: #444; 19 | font-size: 1rem; 20 | font-weight: 700; 21 | letter-spacing: .2rem; 22 | text-align: center; 23 | outline: none; 24 | cursor: pointer; 25 | transition: .2s ease-in-out; 26 | box-shadow: -6px -6px 14px rgba(255, 255, 255, .7), 27 | -6px -6px 10px rgba(255, 255, 255, .5), 28 | 6px 6px 8px rgba(255, 255, 255, .075), 29 | 6px 6px 10px rgba(0, 0, 0, .15); 30 | } 31 | .btn80:hover { 32 | box-shadow: -2px -2px 6px rgba(255, 255, 255, .6), 33 | -2px -2px 4px rgba(255, 255, 255, .4), 34 | 2px 2px 2px rgba(255, 255, 255, .05), 35 | 2px 2px 4px rgba(0, 0, 0, .1); 36 | } 37 | .btn80:active { 38 | box-shadow: inset -2px -2px 6px rgba(255, 255, 255, .7), 39 | inset -2px -2px 4px rgba(255, 255, 255, .5), 40 | inset 2px 2px 2px rgba(255, 255, 255, .075), 41 | inset 2px 2px 4px rgba(0, 0, 0, .15); 42 | } 43 | @media (max-width: 600px){ 44 | .h{ 45 | width:500px; 46 | margin-right: -1em; 47 | 48 | } 49 | } -------------------------------------------------------------------------------- /design_button/yashwanth/yashwanth.css: -------------------------------------------------------------------------------- 1 | .toggle-container { 2 | position: relative; 3 | display: inline-block; 4 | width: 60px; 5 | height: 34px; 6 | } 7 | 8 | .toggle-slider { 9 | position: absolute; 10 | cursor: pointer; 11 | top: 0; 12 | left: 0; 13 | right: 0; 14 | bottom: 0; 15 | background-color: #ccc; 16 | border-radius: 34px; 17 | transition: .4s; 18 | } 19 | 20 | .toggle-slider:before { 21 | position: absolute; 22 | content: ""; 23 | height: 26px; 24 | width: 26px; 25 | left: 4px; 26 | bottom: 4px; 27 | background-color: white; 28 | border-radius: 50%; 29 | transition: .4s; 30 | } 31 | 32 | input:checked + .toggle-slider { 33 | background-color: #2196F3; 34 | } 35 | 36 | input:checked + .toggle-slider:before { 37 | transform: translateX(26px); 38 | } 39 | 40 | input { 41 | display: none; 42 | } -------------------------------------------------------------------------------- /design_button/yashwanth/yashwanth1.css: -------------------------------------------------------------------------------- 1 | .toggle-slider-new { 2 | position: absolute; 3 | cursor: pointer; 4 | top: 0; 5 | left: 0; 6 | right: 0; 7 | bottom: 0; 8 | background-color: #666; 9 | border-radius: 34px; 10 | border: 2px solid #999; /* Border color */ 11 | transition: .4s; 12 | } 13 | 14 | .toggle-slider-new:before { 15 | position: absolute; 16 | content: ""; 17 | height: 26px; 18 | width: 26px; 19 | top: 2px; /* Adjust top position */ 20 | left: 2px; 21 | background-color: #333; /* Inner circle color */ 22 | border-radius: 50%; 23 | transition: .4s; 24 | } 25 | 26 | input:checked + .toggle-slider-new { 27 | background-color: #999; /* Checked background color */ 28 | border: 2px solid #333; 29 | } 30 | 31 | input:checked + .toggle-slider-new:before { 32 | transform: translateX(26px); 33 | } 34 | -------------------------------------------------------------------------------- /design_button/yashwanth/yashwanth2.css: -------------------------------------------------------------------------------- 1 | /* Original toggle button styles */ 2 | .toggle-container { 3 | position: relative; 4 | display: inline-block; 5 | width: 60px; 6 | height: 34px; 7 | } 8 | 9 | .toggle-slider { 10 | position: absolute; 11 | cursor: pointer; 12 | top: 0; 13 | left: 0; 14 | right: 0; 15 | bottom: 0; 16 | background-color: #ccc; 17 | border-radius: 34px; 18 | transition: .4s; 19 | } 20 | 21 | .toggle-slider:before { 22 | position: absolute; 23 | content: ""; 24 | height: 26px; 25 | width: 26px; 26 | left: 4px; 27 | bottom: 4px; 28 | background-color: white; 29 | border-radius: 50%; 30 | transition: .4s; 31 | } 32 | 33 | input:checked + .toggle-slider { 34 | background-color: #2196F3; 35 | } 36 | 37 | input:checked + .toggle-slider:before { 38 | transform: translateX(26px); 39 | } 40 | 41 | input { 42 | display: none; 43 | } 44 | 45 | /* New toggle button styles */ 46 | .toggle-container-new { 47 | position: relative; 48 | display: inline-block; 49 | width: 60px; 50 | height: 34px; 51 | margin-top: 20px; /* Add some spacing */ 52 | } 53 | 54 | input.new-toggle { 55 | display: none; 56 | } 57 | /* Another toggle button styles */ 58 | .toggle-container-another { 59 | position: relative; 60 | display: inline-block; 61 | width: 80px; 62 | height: 40px; 63 | margin-top: 20px; /* Add some spacing */ 64 | } 65 | 66 | .toggle-slider-another { 67 | position: absolute; 68 | cursor: pointer; 69 | top: 0; 70 | left: 0; 71 | right: 0; 72 | bottom: 0; 73 | background-color: #ffcc00; /* Yellow background */ 74 | border-radius: 20px; 75 | border: 2px solid #e68a00; /* Darker border color */ 76 | transition: .4s; 77 | } 78 | 79 | .toggle-slider-another:before { 80 | position: absolute; 81 | content: ""; 82 | height: 32px; 83 | width: 32px; 84 | top: 2px; /* Adjust top position */ 85 | left: 2px; /* Adjust left position */ 86 | background-color: #e68a00; /* Darker inner circle color */ 87 | border-radius: 50%; 88 | transition: .4s; 89 | } 90 | 91 | input:checked + .toggle-slider-another { 92 | background-color: #895912; /* Checked background color */ 93 | } 94 | 95 | input:checked + .toggle-slider-another:before { 96 | transform: translateX(40px); 97 | } 98 | 99 | input.another-toggle { 100 | display: none; 101 | } -------------------------------------------------------------------------------- /design_button/yashwanth/yashwanth3.css: -------------------------------------------------------------------------------- 1 | .btn-container { 2 | display: table-cell; 3 | vertical-align: middle; 4 | text-align: center; 5 | } 6 | 7 | .btn-container i { 8 | display: inline-block; 9 | position: relative; 10 | top: -9px; 11 | } 12 | 13 | label { 14 | font-size: 13px; 15 | color: #424242; 16 | font-weight: 700; 17 | } 18 | 19 | .btn-color-mode-switch { 20 | display: flex; 21 | align-items: center; 22 | justify-content: center; 23 | margin: 0px; 24 | position: relative; 25 | } 26 | 27 | .btn-color-mode-switch > label.btn-color-mode-switch-inner { 28 | margin: 0px; 29 | width: 140px; 30 | height: 35px; 31 | background: #E0E0E0; 32 | border-radius: 26px; 33 | overflow: hidden; 34 | position: relative; 35 | transition: all 0.3s ease; 36 | display: block; 37 | } 38 | 39 | .btn-color-mode-switch > label.btn-color-mode-switch-inner:before { 40 | content: attr(data-on); 41 | position: absolute; 42 | font-size: 12px; 43 | font-weight: 70; 44 | top: 7px; 45 | right: 20px; 46 | } 47 | 48 | .btn-color-mode-switch > label.btn-color-mode-switch-inner:after { 49 | content: attr(data-off); 50 | width: 70px; 51 | height: 31px; 52 | background: #fff; 53 | border-radius: 26px; 54 | position: absolute; 55 | left: 2px; 56 | top: 2px; 57 | text-align: center; 58 | transition: all 0.3s ease; 59 | box-shadow: 0px 0px 6px -2px #111; 60 | padding: 5px 0px; 61 | } 62 | 63 | .btn-color-mode-switch > .alert { 64 | display: none; 65 | background: #FF9800; 66 | border: none; 67 | color: #fff; 68 | } 69 | 70 | .btn-color-mode-switch input[type="checkbox"] { 71 | cursor: pointer; 72 | width: 50px; 73 | height: 25px; 74 | opacity: 0; 75 | position: absolute; 76 | top: 0; 77 | z-index: 1; 78 | margin: 0px; 79 | } 80 | 81 | .btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner { 82 | background: #151515; 83 | color: #fff; 84 | } 85 | 86 | .btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:after { 87 | content: attr(data-on); 88 | left: 68px; 89 | background: #3c3c3c; 90 | } 91 | 92 | .btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:before { 93 | content: attr(data-off); 94 | right: auto; 95 | left: 20px; 96 | } 97 | 98 | .dark-preview { 99 | background: #0d0d0d; 100 | } 101 | 102 | .dark-preview .btn-container i.fa-sun-o { 103 | color: #777; 104 | } 105 | 106 | .dark-preview .btn-container i.fa-moon-o { 107 | color: #fff; 108 | text-shadow: 0px 0px 11px #fff; 109 | } 110 | 111 | .white-preview { 112 | background: #fff; 113 | } 114 | 115 | .white-preview .btn-container i.fa-sun-o { 116 | color: #ffa500; 117 | text-shadow: 0px 0px 16px #ffa500; 118 | } 119 | 120 | .white-preview .btn-container i.fa-moon-o { 121 | color: #777; 122 | } 123 | 124 | p.by a { 125 | text-decoration: none; 126 | color: #000; 127 | } 128 | 129 | .dark-preview p.by a { 130 | color: #777; 131 | } 132 | 133 | .white-preview p.by a { 134 | color: #000; 135 | } -------------------------------------------------------------------------------- /design_button/yashwanth/yashwanth4.css: -------------------------------------------------------------------------------- 1 | .two-option { 2 | box-sizing: border-box; 3 | -webkit-appearance: none; 4 | position: relative; 5 | display: flex; 6 | width: 95px; /* Reduced by 30% */ 7 | height: 52.5px; /* Reduced by 30% */ 8 | margin: auto; /* Reduced by 30% */ 9 | border: 3.5px solid #f7f7f5; /* Reduced by 30% */ 10 | border-radius: 11.9px; /* Reduced by 30% */ 11 | cursor: pointer; 12 | background: white; 13 | } 14 | 15 | .two-option:after, 16 | .two-option:before { 17 | box-sizing: border-box; 18 | position: absolute; 19 | left: 3.5px; /* Reduced by 30% */ 20 | top: 3.5px; /* Reduced by 30% */ 21 | width: 38.5px; /* Reduced by 30% */ 22 | height: 38.5px; /* Reduced by 30% */ 23 | border: 3.5px solid; 24 | border-radius: 50%; /* Changed to a circle */ 25 | text-align: center; 26 | line-height: 29.4px; /* Reduced by 30% */ 27 | font-size: 22.4px; /* Reduced by 30% */ 28 | transition: all 0.3s ease-out; 29 | } 30 | 31 | .two-option:before { 32 | content: "No"; /* Changed to "No" */ 33 | color: #d93816; 34 | border-color: #ff6645; 35 | background: #ffddcc; 36 | font-size: medium; 37 | justify-content: center; 38 | align-items: center; 39 | 40 | } 41 | 42 | .two-option:after { 43 | left: auto; 44 | right: 3.5px; /* Reduced by 30% */ 45 | content: "Yes"; /* Changed to "Yes" */ 46 | border-color: #34a84d; 47 | color: #30ba4e; 48 | background: #ccffbb; 49 | opacity: 0.4; 50 | font-size: medium; 51 | justify-content: center; 52 | align-items: center; 53 | 54 | } 55 | 56 | .two-option:checked:after { 57 | opacity: 1; 58 | } 59 | 60 | .two-option:checked:before { 61 | opacity: 0.4; 62 | } -------------------------------------------------------------------------------- /design_button/yashwanth/yashwanth5.css: -------------------------------------------------------------------------------- 1 | .switch-input { 2 | display: none; 3 | } 4 | 5 | .switch-container { 6 | display: inline-block; 7 | width: 60px; /*=w*/ 8 | height: 30px; /*=h*/ 9 | margin: 4px; 10 | transform: translateY(50%); 11 | position: relative; 12 | } 13 | 14 | .switch-slider { 15 | position: absolute; 16 | top: 0; 17 | bottom: 0; 18 | left: 0; 19 | right: 0; 20 | border-radius: 30px; 21 | box-shadow: 0 0 0 2px #777, 0 0 4px #777; 22 | cursor: pointer; 23 | border: 4px solid transparent; 24 | overflow: hidden; 25 | transition: 0.2s; 26 | } 27 | 28 | .switch-slider:before { 29 | position: absolute; 30 | content: ""; 31 | width: 100%; 32 | height: 100%; 33 | background-color: #777; 34 | border-radius: 30px; 35 | transform: translateX(-30px); /*translateX(-(w-h))*/ 36 | transition: 0.2s; 37 | } 38 | 39 | .switch-input:checked + .switch-slider:before { 40 | transform: translateX(30px); /*translateX(w-h)*/ 41 | background-color: limeGreen; 42 | } 43 | 44 | .switch-input:checked + .switch-slider { 45 | box-shadow: 0 0 0 2px limeGreen, 0 0 8px limeGreen; 46 | } 47 | 48 | .switch-200 .switch-slider:before { 49 | width: 200%; 50 | transform: translateX(-82px); /*translateX(-(w-h))*/ 51 | } 52 | 53 | .switch-200 .switch-input:checked + .switch-slider:before { 54 | background-color: red; 55 | } 56 | 57 | .switch-200 .switch-input:checked + .switch-slider { 58 | box-shadow: 0 0 0 2px red, 0 0 8px red; 59 | } 60 | -------------------------------------------------------------------------------- /design_button/yashwanth/yashwanth6.css: -------------------------------------------------------------------------------- 1 | .flat-toggle { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | margin: auto; 6 | } 7 | 8 | .flat-toggle input { 9 | display: none; 10 | } 11 | 12 | .flat-toggle-label { 13 | display: flex; 14 | align-items: center; 15 | cursor: pointer; 16 | padding: 5px; 17 | border: 2px solid #3498db; /* Border color */ 18 | border-radius: 5px; 19 | transition: background-color 0.3s, border-color 0.3s; 20 | } 21 | 22 | .flat-toggle-label:hover { 23 | background-color: #ecf0f1; /* Background color on hover */ 24 | } 25 | 26 | .flat-toggle-input:checked + .flat-toggle-label { 27 | background-color: #3498db; /* Background color when checked */ 28 | border-color: #3498db; /* Border color when checked */ 29 | color: #fff; /* Text color when checked */ 30 | } 31 | 32 | .flat-toggle-input + .flat-toggle-label .toggle-text { 33 | margin-left: 10px; 34 | margin-right: 10px; 35 | } 36 | 37 | .flat-toggle-input:checked + .flat-toggle-label .toggle-text { 38 | color: #fff; /* Text color when checked */ 39 | } 40 | 41 | .flat-toggle-input:checked + .flat-toggle-label .toggle-indicator { 42 | transform: translateX(100%); 43 | } 44 | 45 | .flat-toggle-input:checked + .flat-toggle-label .state-indicator::after { 46 | content: 'Enabled'; 47 | margin-left: 5px; 48 | font-weight: bold; 49 | color: #fff; 50 | } 51 | 52 | .flat-toggle-input + .flat-toggle-label .state-indicator::after { 53 | content: 'Disabled'; 54 | margin-left: 5px; 55 | font-weight: bold; 56 | color: #3498db; 57 | } 58 | -------------------------------------------------------------------------------- /design_button/yashwanth/yashwanth7.css: -------------------------------------------------------------------------------- 1 | .custom-toggle { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | margin: auto; 6 | } 7 | 8 | .custom-toggle input { 9 | display: none; 10 | } 11 | 12 | .custom-toggle-label { 13 | display: flex; 14 | align-items: center; 15 | cursor: pointer; 16 | padding: 5px; 17 | border: 2px solid #27ae60; /* Border color */ 18 | border-radius: 20px; 19 | transition: background-color 0.3s, border-color 0.3s; 20 | } 21 | 22 | .custom-toggle-label:hover { 23 | background-color: #2ecc71; /* Background color on hover */ 24 | } 25 | 26 | .custom-toggle-input:checked + .custom-toggle-label { 27 | background-color: #27ae60; /* Background color when checked */ 28 | border-color: #27ae60; /* Border color when checked */ 29 | } 30 | 31 | .custom-toggle-input + .custom-toggle-label .custom-toggle-text { 32 | margin-left: 10px; 33 | margin-right: 10px; 34 | color: #333; 35 | } 36 | 37 | .custom-toggle-input:checked + .custom-toggle-label .custom-toggle-text { 38 | color: #fff; /* Text color when checked */ 39 | } 40 | 41 | .custom-toggle-input + .custom-toggle-label .custom-toggle-slider { 42 | width: 30px; 43 | height: 30px; 44 | background-color: #fff; 45 | border-radius: 50%; 46 | margin-left: 10px; 47 | content: ''; 48 | transition: transform 0.3s; 49 | } 50 | 51 | .custom-toggle-input:checked + .custom-toggle-label .custom-toggle-slider::before { 52 | content: '\2713'; /* Checkmark symbol */ 53 | font-size: 20px; 54 | color: #2ecc71; /* Bright green color */ 55 | } 56 | 57 | .custom-toggle-input + .custom-toggle-label .custom-toggle-slider::before { 58 | content: '\2717'; /* X symbol */ 59 | font-size: 20px; 60 | color: #c0392b; /* Dark red color */ 61 | } 62 | -------------------------------------------------------------------------------- /design_button/yusra05.css: -------------------------------------------------------------------------------- 1 | .box-main #yusra05 { 2 | background: linear-gradient(to bottom, #5d326c, #350048); 3 | border-radius: 100px; 4 | position: relative; 5 | top: 0; 6 | left: 0; 7 | width: 250px; 8 | height: 50px; 9 | margin: 0; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | color: #fff; 14 | z-index: 0; 15 | text-decoration: none; 16 | font-weight: bold; 17 | } 18 | 19 | .box-main #yusra05 a { 20 | position: absolute; 21 | top: 0; 22 | left: 0; 23 | width: 100%; 24 | height: 100%; 25 | display: flex; 26 | justify-content: center; 27 | align-items: center; 28 | background: rgba(255, 255, 255, 0.05); 29 | box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3); 30 | border-bottom: 1px solid rgba(255, 255, 255, 0.1); 31 | border-top: 1px solid rgba(255, 255, 255, 0.1); 32 | border-radius: 30px; 33 | padding: 10px; 34 | letter-spacing: 1px; 35 | text-decoration: none; 36 | overflow: hidden; 37 | font-weight: bold; 38 | transition: 0.5s; 39 | backdrop-filter: blur(15px); 40 | border: none; 41 | } 42 | 43 | .box-main #yusra05:hover a { 44 | letter-spacing: 3px; 45 | } 46 | 47 | .box-main #yusra05 a::before { 48 | content: ""; 49 | position: absolute; 50 | top: 0; 51 | left: 0; 52 | width: 50%; 53 | height: 100%; 54 | background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent); 55 | transform: skewX(45deg) translate(0); 56 | transition: 0.5s; 57 | filter: blur(0px); 58 | } 59 | 60 | .box-main #yusra05:hover a::before { 61 | transform: skewX(45deg) translate(200px); 62 | } 63 | 64 | .box-main #yusra05::before { 65 | content: " "; 66 | position: absolute; 67 | left: 50%; 68 | transform: translatex(-50%); 69 | bottom: -5px; 70 | width: 30px; 71 | height: 10px; 72 | background: #f00; 73 | border-radius: 10px; 74 | transition: 0.5s; 75 | transition-delay: 0.5; 76 | } 77 | 78 | .box-main #yusra05:hover::before /*lightup button*/ { 79 | bottom: 0; 80 | height: 50%; 81 | width: 80%; 82 | border-radius: 30px; 83 | } 84 | 85 | .box-main #yusra05::after { 86 | content: ""; 87 | position: absolute; 88 | left: 50%; 89 | transform: translatex(-50%); 90 | top: -5px; 91 | width: 30px; 92 | height: 10px; 93 | background: #f00; 94 | border-radius: 10px; 95 | transition: 0.5s; 96 | transition-delay: 0.5; 97 | z-index: -1; 98 | } 99 | 100 | .box-main #yusra05:hover::after /*lightup button*/ { 101 | top: 0; 102 | height: 50%; 103 | width: 80%; 104 | border-radius: 30px; 105 | } 106 | 107 | .box-main #yusra05:nth-child(1)::before, 108 | .box-main #yusra05:nth-child(1)::after { 109 | z-index: -1; 110 | background: #ff1f71; 111 | box-shadow: 0 0 5px #ff1f71, 0 0 15px #ff1f71, 0 0 30px #ff1f71, 0 0 60px #ff1f71; 112 | } -------------------------------------------------------------------------------- /design_button/zul132-1.css: -------------------------------------------------------------------------------- 1 | .box-main #zul132-1 { 2 | position: relative; 3 | background: #fff; 4 | color: #000; 5 | text-decoration: none; 6 | text-transform: uppercase; 7 | font-size: 1.5em; 8 | letter-spacing: 0.1em; 9 | font-weight: 400; 10 | padding: 10px 30px; 11 | transition: 0.5s; 12 | display: inline-block; 13 | margin-bottom: 7px; 14 | } 15 | 16 | .box-main #zul132-1:hover { 17 | background: #1e9bff; 18 | letter-spacing: 0.25em; 19 | box-shadow: 0 0 35px #1e9bff; 20 | } 21 | -------------------------------------------------------------------------------- /design_button/zul132-10.css: -------------------------------------------------------------------------------- 1 | #zul132-10 { 2 | padding: 20px 40px; 3 | font-size: 16px; 4 | background-color: #3498db; 5 | color: white; 6 | border: none; 7 | border-radius: 5px; 8 | cursor: pointer; 9 | position: relative; 10 | overflow: hidden; 11 | transition: all 0.3s ease; 12 | } 13 | 14 | #zul132-10::before, 15 | #zul132-10::after { 16 | content: ''; 17 | position: absolute; 18 | left: 0; 19 | width: 100%; 20 | height: 50%; 21 | background-color: #2980b9; 22 | transition: all 0.3s ease; 23 | } 24 | 25 | #zul132-10::before { 26 | top: -100%; 27 | } 28 | 29 | #zul132-10::after { 30 | bottom: -100%; 31 | } 32 | 33 | #zul132-10:hover::before { 34 | top: 0; 35 | } 36 | 37 | #zul132-10:hover::after { 38 | bottom: 0; 39 | } 40 | 41 | #zul132-10 span { 42 | position: relative; 43 | z-index: 1; 44 | } 45 | -------------------------------------------------------------------------------- /design_button/zul132-2.css: -------------------------------------------------------------------------------- 1 | .box-main #zul132-2 2 | { 3 | position: relative; 4 | border: none; 5 | cursor: pointer; 6 | padding: 20px 50px; 7 | border-radius: 50px; 8 | font-weight: bold; 9 | text-transform: uppercase; 10 | font-size: 24px; 11 | letter-spacing: 5px; 12 | background-size: 100%; 13 | color: #fff; 14 | overflow: hidden; 15 | margin-bottom: 7px; 16 | } 17 | .box-main #zul132-2::before 18 | { 19 | content: ' '; 20 | position: absolute; 21 | display: block; 22 | left: -10px; 23 | top: 50%; 24 | width: 250px; 25 | height: 250px; 26 | border-radius: 50px; 27 | background-image: conic-gradient( 28 | #fd00fc, 29 | #fe9000, 30 | #fff020, 31 | #3edf4b, 32 | #3363ff, 33 | #b102b7, 34 | #fd004c); 35 | filter: blur(10px); 36 | transform: translateY(-50%) rotate(0); 37 | transition: transorm 0.3s; 38 | } 39 | .box-main .rainbow-button_title 40 | { 41 | position: relative; 42 | z-index: 2; 43 | } 44 | .box-main #zul132-2:hover::before 45 | { 46 | transform: translateY(-50%) rotate(180deg); 47 | } 48 | -------------------------------------------------------------------------------- /design_button/zul132-3.css: -------------------------------------------------------------------------------- 1 | .rainbow{ 2 | background-color: #000000; 3 | border-radius: 4px; 4 | color: violet; 5 | cursor: pointer; 6 | padding: 16px 30px; 7 | } 8 | 9 | .rainbow-1{ 10 | color: orangered; 11 | } 12 | 13 | .rainbow-1:hover{ 14 | background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%); 15 | animation:slidebg 5s linear infinite; 16 | } 17 | 18 | @keyframes slidebg { 19 | to { 20 | background-position:20vw; 21 | } 22 | } -------------------------------------------------------------------------------- /design_button/zul132-4.css: -------------------------------------------------------------------------------- 1 | .rainbow{ 2 | background-color: #000000; 3 | border-radius: 4px; 4 | color: violet; 5 | cursor: pointer; 6 | padding: 16px 30px; 7 | } 8 | 9 | .rainbow-2{ 10 | color: yellow; 11 | } 12 | 13 | .rainbow-2:hover{ 14 | background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet, red); 15 | animation:slidebg 2s linear infinite; 16 | } 17 | 18 | @keyframes slidebg { 19 | to { 20 | background-position:20vw; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /design_button/zul132-5.css: -------------------------------------------------------------------------------- 1 | .rainbow{ 2 | background-color: #000000; 3 | border-radius: 4px; 4 | color: violet; 5 | cursor: pointer; 6 | padding: 16px 30px; 7 | } 8 | 9 | .rainbow-3{ 10 | color: lawngreen; 11 | } 12 | 13 | .rainbow-3:hover{ 14 | background-image: linear-gradient(to right, red, orange, yellow, green, blue, red); 15 | animation:slidebg 2s linear infinite; 16 | } 17 | 18 | @keyframes slidebg { 19 | to { 20 | background-position:20vw; 21 | } 22 | } -------------------------------------------------------------------------------- /design_button/zul132-6.css: -------------------------------------------------------------------------------- 1 | .rainbow{ 2 | background-color: #000000; 3 | border-radius: 4px; 4 | color: violet; 5 | cursor: pointer; 6 | padding: 16px 30px; 7 | } 8 | 9 | .rainbow-4{ 10 | color: skyblue; 11 | } 12 | 13 | .rainbow-4:hover{ 14 | background-image: linear-gradient( 15 | to right, 16 | #E7484F, 17 | #F68B1D, 18 | #FCED00, 19 | #009E4F, 20 | #00AAC3, 21 | #732982 22 | ); 23 | animation:slidebg 2s linear infinite; 24 | } 25 | 26 | @keyframes slidebg { 27 | to { 28 | background-position:20vw; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /design_button/zul132-7.css: -------------------------------------------------------------------------------- 1 | .rainbow{ 2 | background-color: #000000; 3 | border-radius: 4px; 4 | color: violet; 5 | cursor: pointer; 6 | padding: 16px 30px; 7 | } 8 | 9 | .rainbow-5{ 10 | color: violet; 11 | } 12 | 13 | .rainbow-5:hover{ 14 | background-image: linear-gradient( 15 | to right, 16 | #E7484F, 17 | #E7484F 16.65%, 18 | #F68B1D 16.65%, 19 | #F68B1D 33.3%, 20 | #FCED00 33.3%, 21 | #FCED00 49.95%, 22 | #009E4F 49.95%, 23 | #009E4F 66.6%, 24 | #00AAC3 66.6%, 25 | #00AAC3 83.25%, 26 | #732982 83.25%, 27 | #732982 100%, 28 | #E7484F 100% 29 | 30 | ); 31 | animation:slidebg 2s linear infinite; 32 | } 33 | 34 | @keyframes slidebg { 35 | to { 36 | background-position:20vw; 37 | } 38 | } -------------------------------------------------------------------------------- /design_button/zul132-8.css: -------------------------------------------------------------------------------- 1 | #zul132-8 { 2 | padding: 20px 40px; 3 | font-size: 16px; 4 | background-color: #e833cd; 5 | color: white; 6 | border: none; 7 | border-radius: 5px; 8 | cursor: pointer; 9 | position: relative; 10 | overflow: hidden; 11 | outline: none; 12 | } 13 | 14 | #zul132-8::before { 15 | content: ''; 16 | position: absolute; 17 | top: 50%; 18 | left: 50%; 19 | width: 300%; 20 | height: 300%; 21 | background-color: rgba(255, 255, 255, 0.5); 22 | transition: all 0.5s ease; 23 | border-radius: 50%; 24 | z-index: 0; 25 | transform: translate(-50%, -50%); 26 | } 27 | 28 | #zul132-8:hover::before { 29 | width: 0; 30 | height: 0; 31 | } 32 | 33 | #zul132-8 span { 34 | position: relative; 35 | z-index: 1; 36 | } 37 | -------------------------------------------------------------------------------- /design_button/zul132-9.css: -------------------------------------------------------------------------------- 1 | #zul132-9 { 2 | padding: 20px 40px; 3 | font-size: 16px; 4 | background-color: #3498db; 5 | color: white; 6 | border: none; 7 | border-radius: 5px; 8 | cursor: pointer; 9 | position: relative; 10 | overflow: hidden; 11 | transition: all 0.3s ease; 12 | } 13 | 14 | #zul132-9::before, 15 | #zul132-9::after { 16 | content: ''; 17 | position: absolute; 18 | top: 0; 19 | width: 50%; 20 | height: 100%; 21 | background-color: #1e72ab; 22 | transition: all 0.3s ease; 23 | } 24 | 25 | #zul132-9::before { 26 | left: -100%; 27 | } 28 | 29 | #zul132-9::after { 30 | right: -100%; 31 | } 32 | 33 | #zul132-9:hover::before { 34 | left: 0; 35 | } 36 | 37 | #zul132-9:hover::after { 38 | right: 0; 39 | } 40 | 41 | #zul132-9 span { 42 | position: relative; 43 | z-index: 1; /* Ensure the text appears above pseudo-elements */ 44 | } 45 | -------------------------------------------------------------------------------- /feedback.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Feedback Page 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |

CONNECT WITH US

18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 |
26 |
27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /footer_main.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap"); 2 | 3 | section{ 4 | margin-bottom: 10vh; 5 | } 6 | 7 | .footer { 8 | /* position: fixed; */ 9 | width: 100%; 10 | background: #212529; 11 | min-height: 10px; 12 | padding: 10px 50px; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | flex-direction: column; 17 | bottom: 0px; 18 | z-index: 10; 19 | margin-top: 10vh; 20 | } 21 | 22 | .social-icon, 23 | .menu { 24 | position: relative; 25 | display: flex; 26 | justify-content: center; 27 | align-items: center; 28 | margin: 10px 0; 29 | flex-wrap: wrap; 30 | } 31 | 32 | .social-icon__item, 33 | .menu__item { 34 | list-style: none; 35 | } 36 | 37 | .social-icon__link { 38 | font-size: 2rem; 39 | color: #fff; 40 | margin: 0 10px; 41 | display: inline-block; 42 | transition: 0.5s; 43 | } 44 | .social-icon__link:hover { 45 | transform: translateY(-10px); 46 | } 47 | 48 | .menu__link { 49 | font-size: 1.2rem; 50 | color: #fff; 51 | margin: 0 10px; 52 | display: inline-block; 53 | transition: 0.5s; 54 | text-decoration: none; 55 | opacity: 0.75; 56 | font-weight: 300; 57 | } 58 | 59 | .menu__link:hover { 60 | opacity: 1; 61 | } 62 | 63 | .footer p { 64 | color: #fff; 65 | margin: 15px 0 10px 0; 66 | font-size: 1rem; 67 | font-weight: 300; 68 | } 69 | 70 | 71 | @keyframes animateWaves { 72 | 0% { 73 | background-position-x: 1000px; 74 | } 75 | 100% { 76 | background-positon-x: 0px; 77 | } 78 | } 79 | 80 | @keyframes animate { 81 | 0% { 82 | background-position-x: -1000px; 83 | } 84 | 100% { 85 | background-positon-x: 0px; 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /infopage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Web Button Design - Info 9 | 10 | 11 | 14 | 15 | 16 | 17 |
18 | 19 | 36 |
37 |
38 |

Information about Web Button Design

39 |
40 | 41 |
42 |
43 |

About the App

44 |

The Button Web Design app is meticulously crafted to delve into the intricate world of web buttons. Often 45 | overlooked, buttons play a crucial role in web development. Whether you're a novice or a seasoned developer, 46 | this platform aims to enrich your understanding of button design. It provides valuable tips, tutorials, and 47 | resources to ensure your web buttons are not only visually appealing but also highly functional.

48 |
49 | 50 |
51 |

Why is This Made?

52 |

In the expansive realm of web development, buttons are pivotal in user interaction. Recognizing the need for a 53 | dedicated resource, Swarnadeep Saha Poddar created this platform. Button Web Design fills the gap by offering a 54 | centralized space for developers to learn, share, and elevate their button design skills.

55 |
56 | 57 |
58 |

About the Owner

59 |

Swarnadeep Saha Poddar, a passionate BTech CSE student, is the visionary behind Button Web Design. His 60 | commitment to web development led him to acknowledge the importance of details like button design. Beyond being 61 | the creator of this platform, Swarnadeep is an avid learner and contributor to the developer community.

62 |
63 | 64 |
65 |

Connect with Swarnadeep Saha Poddar

66 |
67 | 68 | GitHub icon 69 | 70 | 71 | LinkedIn icon 72 | 73 | Swarnadeep Saha Poddar 74 |
75 |

Feel free to explore the platform, delve deeper into button web design, and connect with Swarnadeep Saha Poddar 76 | on LinkedIn and GitHub for insightful discussions and potential collaborations. Happy coding!

77 |
78 |
79 |

Button-makers


80 |
81 |
82 | 83 | GitHub icon 84 | 85 | 86 | LinkedIn icon 87 | 88 | Ratnojit Saha 89 |
90 | 91 |
92 | 93 | GitHub icon 94 | 95 | 96 | LinkedIn icon 97 | 98 | Nandita Gupta 99 |
100 | 101 |
102 | 103 | GitHub icon 104 | 105 | 106 | LinkedIn icon 107 | 108 | Sahil Afroz 109 |
110 | 111 |
112 | 113 | GitHub icon 114 | 115 | 116 | LinkedIn icon 117 | 118 | K Om Senaparti 119 |
120 | 121 |
122 | 123 | GitHub icon 124 | 125 | 126 | LinkedIn icon 127 | 128 | Fathima Zulaikha 129 |
130 |
131 |
132 | 133 | 160 | 161 | 162 | 163 | -------------------------------------------------------------------------------- /infopage/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Arial', sans-serif; 3 | margin: 0; 4 | padding: 0; 5 | background-color: #000000; 6 | color: #fff; 7 | } 8 | 9 | header { 10 | background-color: #1e1d1d; 11 | color: #fff; 12 | text-align: center; 13 | padding: 10px 10px; 14 | border-bottom: 1px solid white; 15 | } 16 | 17 | .container { 18 | max-width: 800px; 19 | margin: 100px; 20 | } 21 | 22 | section { 23 | background-color: black; 24 | padding: 20px; 25 | margin-bottom: 20px; 26 | border-radius: 8px; 27 | } 28 | 29 | h1, h2 { 30 | color: #f3703c; 31 | margin-right: auto; 32 | } 33 | 34 | p { 35 | line-height: 2; 36 | } 37 | 38 | a { 39 | color: #007BFF; 40 | text-decoration: none; 41 | font-weight: bold; 42 | } 43 | 44 | a:hover { 45 | text-decoration: underline;} 46 | 47 | .button-makers { 48 | display: flex; 49 | flex-direction: column; 50 | align-items:flex-start; 51 | 52 | } 53 | 54 | .person { 55 | display: flex; 56 | align-items: center; 57 | margin-bottom: 10px; 58 | gap: 1rem; 59 | } 60 | 61 | .person img { 62 | width: 30px; 63 | height: 30px; 64 | margin-right: 1px; 65 | } 66 | 67 | .person span { 68 | margin-left: 1px; 69 | } 70 | 71 | .head h3{ 72 | text-align: center; 73 | color: darkseagreen; 74 | font-size: 1.89rem; 75 | font-weight: 600; 76 | 77 | } 78 | nav{ 79 | display: flex; 80 | flex-wrap: wrap; 81 | justify-content: center; 82 | align-items: center; 83 | justify-content: space-between; 84 | font-family: "Audiowide", Cantarell; 85 | } 86 | .list{ 87 | display: flex; 88 | list-style: none; 89 | 90 | } 91 | #toggler , label{ 92 | display: none; 93 | } 94 | .left-nav{ 95 | text-decoration: none; 96 | color: rgb(158, 210, 107); 97 | font-size: 1.34rem; 98 | } 99 | .left-nav:hover{ 100 | text-decoration: none; 101 | color: rgb(30, 181, 131); 102 | } 103 | .right-nav ul{ 104 | display: flex; 105 | justify-content: center; 106 | align-items: center; 107 | 108 | } 109 | .right-nav ul li{ 110 | list-style: none; 111 | margin: 0 10px; 112 | } 113 | .right-nav ul li a{ 114 | text-decoration: none; 115 | color: aliceblue; 116 | font-size: 1.20rem; 117 | 118 | } 119 | #info{ 120 | color: #2b88ec; 121 | } 122 | #info:hover{ 123 | color: rgb(182, 238, 219); 124 | } 125 | .right-nav ul li a:hover{ 126 | color: rgb(182, 238, 219); 127 | } 128 | footer{ 129 | background-color: #161515; 130 | border-top: 3px solid; 131 | text-align: center; 132 | } 133 | .foot-head{ 134 | color: rgb(153, 187, 94); 135 | font-size: 1.35rem; 136 | font-weight: 500; 137 | } 138 | .connect a{ 139 | color: rgb(136, 182, 182); 140 | font-size: 1.7rem; 141 | letter-spacing: 10px; 142 | } 143 | .connect a:hover{ 144 | color: #2e6096; 145 | } 146 | .links a{ 147 | color: rgb(136, 182, 182); 148 | font-size: 1.2rem; 149 | font-weight: 400; 150 | } 151 | .links ul li{ 152 | list-style: none; 153 | } 154 | label i{ 155 | color: white; 156 | } 157 | @media screen and (max-width: 650px) { 158 | .right-nav{ 159 | width: 100%; 160 | max-height: 0; 161 | overflow: hidden; 162 | } 163 | label{ 164 | display: inline-flex; 165 | } 166 | #toggler:checked~.right-nav{ 167 | max-height: 100%; 168 | } 169 | .list{ 170 | flex-direction: column; 171 | align-items: center; 172 | padding: 20px; 173 | } 174 | } 175 | @media (max-width:380px) { 176 | .container{ 177 | margin: 0px; 178 | } 179 | } 180 | @media (max-width:430px) { 181 | .container{ 182 | margin: 0px; 183 | } 184 | } 185 | @media (max-width:770px) { 186 | .container{ 187 | margin: 0px; 188 | } 189 | } 190 | @media (max-width:1036px) { 191 | .container{ 192 | margin: 0px; 193 | } 194 | } 195 | -------------------------------------------------------------------------------- /loader.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | #preloader { 8 | background: #000 url(./Screen\ fingerprint.gif) no-repeat; 9 | background-position-x: center; 10 | background-position-y: center; 11 | background-size: 30rem; 12 | height: 100vh; 13 | width: 100%; 14 | position: fixed; 15 | z-index: 100; 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | } 20 | 21 | span{ 22 | color: white; 23 | font-size: 3.5rem; 24 | letter-spacing: 1px; 25 | font-family: 'Courier New', Courier, monospace; 26 | position: relative; 27 | top: 25%; 28 | left: 3%; 29 | animation-name: animate; 30 | animation-timing-function: linear; 31 | animation-duration: 2s; 32 | animation-iteration-count: infinite; 33 | } 34 | 35 | @keyframes animate { 36 | 0%{ 37 | opacity: 0; 38 | } 39 | 50%{ 40 | opacity: 1; 41 | } 42 | 100%{ 43 | opacity: 0; 44 | } 45 | } -------------------------------------------------------------------------------- /loading.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 | Loading... 12 |
13 | 14 | -------------------------------------------------------------------------------- /rateUs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Rate Us Section 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
😑
17 |
🙁
18 |
😐
19 |
😊
20 |
😄
21 |
22 |
23 |
Rating Score
24 |
1
25 |
2
26 |
3
27 |
4
28 |
5
29 |
30 |
31 |
User Mood
32 |
Very Unsatisfied
33 |
Unsatisfied
34 |
Neutral
35 |
Satisfied
36 |
Very Satisfied
37 |
38 |
39 | Submit 40 |
41 |
42 |
43 |
44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /rateUs.js: -------------------------------------------------------------------------------- 1 | let rate1 = document.querySelectorAll('.rate1'); 2 | let rate2 = document.querySelectorAll('.rate2'); 3 | let rate3 = document.querySelectorAll('.rate3'); 4 | let rate4 = document.querySelectorAll('.rate4'); 5 | let rate5 = document.querySelectorAll('.rate5'); 6 | 7 | let arr = [rate1, rate2, rate3, rate4, rate5]; 8 | 9 | Array.from(arr).forEach((rate) => { 10 | 11 | Array.from(rate).forEach((e) => { 12 | e.addEventListener('click', () => { 13 | Array.from(rate).forEach((ele) => { 14 | ele.style.color = "red"; 15 | }) 16 | 17 | Array.from(arr).forEach((r) => { 18 | if (r != rate) { 19 | Array.from(r).forEach((ele) => { 20 | ele.style.color = "black"; 21 | }) 22 | } 23 | }) 24 | }) 25 | }) 26 | }) 27 | 28 | 29 | 30 | let submit = document.querySelector('.submit-section'); 31 | 32 | let result; 33 | submit.addEventListener('click', (e) => { 34 | Array.from(arr).forEach((rate) => { 35 | Array.from(rate).forEach((e) => { 36 | if (e.style.color == "red") { 37 | if (e.innerText) result = e.innerText; 38 | } 39 | }) 40 | }) 41 | 42 | if (result != undefined) { 43 | console.log(result); 44 | alert("FeedBack Submitted Successfully !"); 45 | Array.from(arr).forEach((rate) => { 46 | Array.from(rate).forEach((e) => { 47 | e.style.color = "black"; 48 | }) 49 | }) 50 | } 51 | else 52 | alert("Please Rate Properly before submitting !"); 53 | }) -------------------------------------------------------------------------------- /rating.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: 'Poppins', sans-serif; 7 | } 8 | body{ 9 | display: grid; 10 | height: 100%; 11 | place-items: center; 12 | text-align: center; 13 | background-image: url("images\ main.jpg"); 14 | background-size: cover; 15 | background-position: center; 16 | background-repeat: no-repeat; 17 | min-height: 100vh; 18 | margin-top: 150px; 19 | } 20 | .container{ 21 | position: relative; 22 | width: 400px; 23 | padding: 20px 30px; 24 | border: 1px solid white; 25 | border-radius: 5px; 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | flex-direction: column; 30 | } 31 | .container .post{ 32 | display: none; 33 | } 34 | .container .text{ 35 | font-size: 25px; 36 | color: white; 37 | font-weight: 500; 38 | } 39 | .container .edit{ 40 | position: absolute; 41 | right: 10px; 42 | top: 45px; 43 | font-size: 16px; 44 | color:white; 45 | font-weight: 500; 46 | cursor: pointer; 47 | } 48 | .container .Home{ 49 | position: absolute; 50 | right: 10px; 51 | top: 5px; 52 | font-size: 16px; 53 | color: white; 54 | font-weight: 500; 55 | cursor: pointer; 56 | } 57 | .container .edit:hover{ 58 | text-decoration: underline; 59 | } 60 | .container .star-widget input{ 61 | display: none; 62 | } 63 | .star-widget label{ 64 | font-size: 40px; 65 | color: white; 66 | padding: 10px; 67 | float: right; 68 | transition: all 0.2s ease; 69 | } 70 | input:not(:checked) ~ label:hover, 71 | input:not(:checked) ~ label:hover ~ label{ 72 | color: #fd4; 73 | } 74 | input:checked ~ label{ 75 | color: #fd4; 76 | } 77 | input#rate-5:checked ~ label{ 78 | color: #fe7; 79 | text-shadow: 0 0 20px #952; 80 | } 81 | #rate-1:checked ~ form header:before{ 82 | content: "I just hate it "; 83 | } 84 | #rate-2:checked ~ form header:before{ 85 | content: "I don't like it "; 86 | } 87 | #rate-3:checked ~ form header:before{ 88 | content: "It is awesome "; 89 | } 90 | #rate-4:checked ~ form header:before{ 91 | content: "I just like it "; 92 | } 93 | #rate-5:checked ~ form header:before{ 94 | content: "I just love it "; 95 | } 96 | .container form{ 97 | display: none; 98 | } 99 | input:checked ~ form{ 100 | display: block; 101 | } 102 | form header{ 103 | width: 100%; 104 | font-size: 25px; 105 | color: #fe7; 106 | font-weight: 500; 107 | margin: 5px 0 20px 0; 108 | text-align: center; 109 | transition: all 0.2s ease; 110 | } 111 | form .textarea{ 112 | height: 100px; 113 | width: 100%; 114 | overflow: hidden; 115 | } 116 | form .textarea textarea{ 117 | height: 100%; 118 | width: 100%; 119 | outline: none; 120 | color: #eee; 121 | border: 1px solid #333; 122 | background: #222; 123 | padding: 10px; 124 | font-size: 17px; 125 | resize: none; 126 | } 127 | .textarea textarea:focus{ 128 | border-color: #444; 129 | } 130 | form .btn{ 131 | height: 45px; 132 | width: 100%; 133 | margin: 15px 0; 134 | } 135 | form .btn button{ 136 | height: 100%; 137 | width: 100%; 138 | border: 1px solid #444; 139 | outline: none; 140 | background: #222; 141 | color: #999; 142 | font-size: 17px; 143 | font-weight: 500; 144 | text-transform: uppercase; 145 | cursor: pointer; 146 | transition: all 0.3s ease; 147 | } 148 | form .btn button:hover{ 149 | background: #1b1b1b; 150 | } 151 | .navbar { 152 | position: fixed !important; 153 | top: 80px; 154 | left: 0; 155 | width: 100%; 156 | background-color: #00796b; 157 | overflow: visible; 158 | z-index: 1000; 159 | 160 | } 161 | .navlist:hover{ 162 | background-color: #333; 163 | opacity: 0.75; 164 | border-radius: 1rem; 165 | } 166 | .navbar ul { 167 | list-style: none; 168 | margin: 0; 169 | padding: 0; 170 | display: flex; 171 | justify-content: center; 172 | font-size: 25px; 173 | width: 100%; 174 | } 175 | 176 | .navbar li { 177 | margin: 0; 178 | } 179 | .navbar a { 180 | text-decoration: none; 181 | color: #fff; 182 | padding: 1rem; 183 | display: block; 184 | } 185 | 186 | header { 187 | position: fixed; 188 | top: 0; 189 | left: 0; 190 | width: 100%; 191 | text-align: center; 192 | letter-spacing: 0.5em; 193 | font-weight: 900; 194 | background-color: #00bcd4; 195 | color: #fff; 196 | padding: 1rem 0; 197 | z-index: 1000; 198 | /* to Ensure the header is above other elements */ 199 | 200 | } 201 | footer { 202 | background-color: #00796b; 203 | color: #fff; 204 | padding: 20px; 205 | text-align: center; 206 | bottom: 0; 207 | width: 100%; 208 | margin-top: auto; /* Set margin-top to auto to push the footer to the bottom */ 209 | margin-bottom: 0; 210 | } 211 | .socials { 212 | margin-bottom: 10px; 213 | } 214 | 215 | .socials a { 216 | display: inline-block; 217 | margin-right: 10px; 218 | transition: transform 0.3s ease-in-out; 219 | } 220 | 221 | .socials a:hover { 222 | transform: scale(1.2); 223 | } 224 | 225 | .socials img { 226 | width: 30px; 227 | /* Adjust the size as needed */ 228 | height: 30px; 229 | /* Adjust the size as needed */ 230 | } 231 | #scrollToTopBtn { 232 | display: none; 233 | position: fixed; 234 | bottom: 20px; 235 | right: 20px; 236 | background-color: black; 237 | color: #fff; 238 | border: none; 239 | border-radius:50%; 240 | height: 5rem; 241 | width: 5rem; 242 | padding: 10px; 243 | cursor: pointer; 244 | } 245 | 246 | #scrollToTopBtn:hover { 247 | background-color: rgb(43, 43, 43); 248 | } 249 | .twitter-link { 250 | text-decoration: none; 251 | color: inherit; 252 | } 253 | .twitter-link i { 254 | color: inherit; 255 | } 256 | .twitter-link:hover { 257 | color: inherit; 258 | } 259 | 260 | .e-mail-link { 261 | text-decoration: none; 262 | color: inherit; 263 | } 264 | .e-mail-link i { 265 | color: inherit; 266 | } 267 | .e-mail-link:hover { 268 | color: inherit; 269 | } 270 | 271 | .github-link { 272 | text-decoration: none; 273 | color: inherit; 274 | } 275 | .github-link i { 276 | color: inherit; 277 | } 278 | .github-link:hover { 279 | color: inherit; 280 | } 281 | 282 | .linkedin-link { 283 | text-decoration: none; 284 | color: inherit; 285 | } 286 | .linkedin-link i { 287 | color: inherit; 288 | } 289 | .linkedin-link:hover { 290 | color: inherit; 291 | } 292 | .a { 293 | color: white; 294 | text-decoration: none; 295 | 296 | font-size: 15px; 297 | padding: 5px; 298 | 299 | } 300 | .a:hover { 301 | color: #00bcd4; 302 | background-color: none; 303 | text-decoration-color: grey; 304 | transition: 0.3s ease-out; 305 | } 306 | .menu-links a { 307 | display: block; 308 | padding: 10px; 309 | font-weight: bold; 310 | text-align: center; 311 | font-size: 1.5rem; 312 | color: rgb(255, 255, 255); 313 | text-decoration: none; 314 | transition: all 0.3 ease-in-out; 315 | } -------------------------------------------------------------------------------- /rating.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Star Rating Form 6 | 7 | 8 | 9 | 10 |
11 |
12 |
Thanks for rating us!
13 |
EDIT
14 |
Home
15 |
16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 |
29 | 30 |
31 |
32 | 33 |
34 |
35 |
36 |
37 | 56 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # 🎉 Welcome to Web Button Designs! 🎊 2 | 3 | An Open Source Website Where Developer's Can Get Pre-Designed Button's CSS Sheet .Just Can Copy the Design and Implement It 4 | 5 | [Project Repo](https://github.com/swarnade/webdesign-switch) 6 |
7 | [Project Website](https://webdesign.swarnadeepsahapoddar.in/) 8 | 9 | # Project Tech Stack 10 | 11 | This project is built using the following technologies: 12 | 13 | - **HTML**: HTML stands for HyperText Markup Language. It's a markup language that's used to design web pages. HTML is made up of a series of elements that tell the browser how to display the content. 14 | 15 | - **CSS**: CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages (HTML or XML). This language contains coding elements and is composed of these “cascading style sheets” which are equally called CSS files 16 | 17 | - **JS**: JavaScript, often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. As of 2023, 98.7% of websites use JavaScript on the client side for webpage behavior, often incorporating third-party libraries. 18 | 19 | - **Bootstrap**: Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components. 20 | 21 | ## Button Adding Procedure 22 | 23 | ### 1.Create a CSS File 24 | 25 | - Create a File In design_button Sub-Directory 26 | - CSS File Should Be Your Github Username 27 | 28 | ### 2.Paste The Code In HTML Document in Row Div 29 | ``` 30 |
31 |
32 | 33 | 34 | 35 |
36 | {Name Of The Designer} 37 |
38 | 39 | 40 | 41 | 42 | 43 | 44 |
45 |
46 |
47 | ``` 48 | - Use Your Github Username As The Button Id And Css File Name 49 | - If You Have Contributed For Multiple Button Use userrname-1/userrname-2 50 | - Redirect To The CSS File Of The Button 51 | - Make Sure To Include Your Name/Github/Linkedin 52 | 53 | 54 | ## How to make a Pull Request? 55 | 56 | # Local installation Guide Video # - [Guide](https://drive.google.com/file/d/1ZePliQ80DbOlvZuxdRlcdkN_eYOgOrJO/view?usp=sharing) 57 | 58 | ### 1. Fork the Repository 59 | 60 | - Click on the "Fork" button in the top right corner of the repository page. 61 | - This will create a copy of the repository in your GitHub account. 62 | 63 | ### 2. Clone Your Fork 64 | 65 | - Open a terminal on your local machine. 66 | - Use the `git clone` command to clone your forked repository to your local machine. 67 | ```bash 68 | git clone https://github.com/your-username/repository.git 69 | cd repository 70 | ``` 71 | 72 | 3. **Create a Branch** 73 | - Create a new branch: 74 | ```bash 75 | git checkout -b branch-name 76 | ``` 77 | 78 | ### 4. Make Changes 79 | 80 | - Open the Markdown file and make your changes. 81 | 82 | ### 5. Commit Changes 83 | 84 | - Save changes and commit: 85 | ```bash 86 | git add . 87 | git commit -m "Describe changes" 88 | ``` 89 | 90 | ### 6. **Push Changes** 91 | 92 | - Push changes to your fork: 93 | ```bash 94 | git push origin branch-name 95 | ``` 96 | 97 | ### 7. **Create a Pull Request** 98 | 99 | - Visit your fork on GitHub. 100 | - Switch to your branch. 101 | - Click "New Pull Request." 102 | 103 | ### 8. **Compare Changes** 104 | 105 | - Ensure the base repository and branch are correct. 106 | 107 | ### 9. **Create Pull Request** 108 | 109 | - Add a title and description. 110 | - Click "Create Pull Request." 111 | 112 | ### 10. **Review and Merge** 113 | 114 | - Wait for review and merge by repository maintainers. 115 | 116 | ### 11. **Sync Your Fork (Optional)** 117 | 118 | - Periodically sync your fork: 119 | ```bash 120 | git fetch upstream 121 | git checkout main 122 | git merge upstream/main 123 | git push origin main 124 | ``` 125 | 126 |

Congratulations! You've made your first contribution! 🙌🏼

127 | --------------------------------------------------------------------------------