Skip to content

Commit bf2ded1

Browse files
Rajkumar-justcoderRajkumar-justcoder
authored
Merge branch 'main' into wiggle-btn
2 parents 16d834b + e3f644f commit bf2ded1

File tree

2 files changed

+176
-4
lines changed

2 files changed

+176
-4
lines changed

‎buttons/buttons.css

Lines changed: 137 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2310,6 +2310,91 @@ a:focus-visible {
23102310

23112311
/*radzhiv's btn end*/
23122312

2313+
2314+
/* avishaan24's btn start */
2315+
2316+
.avishaan24-btn-1{
2317+
color: white;
2318+
padding: 15px 70px;
2319+
border: 2px solid white;
2320+
border-radius: 15px;
2321+
font-size: medium;
2322+
margin: auto;
2323+
background: transparent;
2324+
}
2325+
.avishaan24-btn-1:hover{
2326+
cursor: pointer;
2327+
box-shadow: 0 0 1px 5px rgba(138, 59, 88, 0.4), 0 0 1px 10px rgba(138, 59, 88, 0.1), 0 0 1px 15px rgba(138, 59, 88, 0.1);
2328+
transform: rotate(360deg);
2329+
}
2330+
2331+
.avishaan24-btn-1::after {
2332+
content: '';
2333+
width: 30px; height: 30px;
2334+
border-radius: 100%;
2335+
border: 5px solid rgb(238, 236, 238);
2336+
position: absolute;
2337+
z-index: -1;
2338+
top: 50%;
2339+
left: 50%;
2340+
transform: translate(-50%, -50%);
2341+
animation: avishaan24-btn-1-oval 2s infinite;
2342+
}
2343+
@keyframes avishaan24-btn-1-oval {
2344+
0% {
2345+
width: 30px;
2346+
height: 30px;
2347+
opacity: 1;
2348+
}
2349+
100% {
2350+
width: 250px;
2351+
height: 150px;
2352+
opacity: 0;
2353+
}
2354+
}
2355+
2356+
/* avishaan24's btn end */
2357+
2358+
/* Aditya's button starts */
2359+
2360+
.aditya-btn-1 {
2361+
width: 150px;
2362+
height: 50px;
2363+
color: white;
2364+
position: relative;
2365+
display: inline-block;
2366+
background: rgb(0, 68, 255);
2367+
border: none;
2368+
border-radius: 4px;
2369+
padding: 10px 25px;
2370+
font-family: Verdana, Geneva, Tahoma, sans-serif;
2371+
font-weight: 20px;
2372+
cursor: pointer;
2373+
transition: all 0.2s ease;
2374+
z-index: 1;
2375+
}
2376+
.aditya-btn-1:after {
2377+
position: absolute;
2378+
content: "";
2379+
width: 0;
2380+
height: 0;
2381+
top: 0;
2382+
left: 0;
2383+
border-radius: 5px;
2384+
background-image: linear-gradient(275deg, #190c8e 0%, #b53232 74%);
2385+
transition: all 0.2s ease-in-out;
2386+
z-index: -1;
2387+
}
2388+
.aditya-btn-1:hover:after {
2389+
top: auto;
2390+
bottom: 0;
2391+
width: 100%;
2392+
height: 100%;
2393+
border-radius: 40%;
2394+
border: none;
2395+
}
2396+
/* Aditya's button end */
2397+
23132398
/* Gaurav Sharma's button 1 starts*/
23142399

23152400
.gauravsharmatheofficial-btn-1-svg {
@@ -2350,6 +2435,7 @@ a:focus-visible {
23502435

23512436
/* Gaurav Sharma's button 1 end*/
23522437

2438+
23532439
/* getRicha-btn-1 start */
23542440

23552441
.getRicha-btn-1 {
@@ -2391,4 +2477,54 @@ a:focus-visible {
23912477
}
23922478
}
23932479

2394-
/* getRicha-btn-1 end */
2480+
/* getRicha-btn-1 end */
2481+
2482+
.arnav-btn-1{
2483+
opacity: 1;
2484+
outline: 0;
2485+
color: #fff;
2486+
line-height: 40px;
2487+
position: relative;
2488+
text-align: center;
2489+
letter-spacing: 1px;
2490+
display: inline-block;
2491+
text-decoration: none;
2492+
font-family: "Inter";
2493+
font-weight: 700;
2494+
text-transform: uppercase;
2495+
}
2496+
.arnav-btn-1:hover:after {
2497+
opacity: 1;
2498+
transform: translateY(0) rotateX(0);
2499+
}
2500+
.arnav-btn-1:hover:before {
2501+
opacity: 0;
2502+
transform: translateY(50%) rotateX(90deg);
2503+
}
2504+
.arnav-btn-1:after {
2505+
top: 0;
2506+
left: 0;
2507+
opacity: 0;
2508+
width: 100%;
2509+
color: #323237;
2510+
display: block;
2511+
transition: 0.5s;
2512+
position: absolute;
2513+
background: #adadaf;
2514+
content: attr(data-back);
2515+
transform: translateY(-50%) rotateX(90deg);
2516+
}
2517+
.arnav-btn-1:before {
2518+
top: 0;
2519+
left: 0;
2520+
opacity: 1;
2521+
color: #adadaf;
2522+
display: block;
2523+
padding: 0 30px;
2524+
line-height: 40px;
2525+
transition: 0.5s;
2526+
position: relative;
2527+
background: #323237;
2528+
content: attr(data-front);
2529+
transform: translateY(0) rotateX(0);
2530+
}

‎index.html

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -588,11 +588,34 @@
588588
<button class="radzhiv-btn-1">Hover me</button>
589589
<div class="createdby-section">
590590
Created by
591-
<a href="https://github.com/radzhiv25">radzhiv</a>
591+
<a href="https://github.com/radzhiv25">radzhiv25</a>
592592
</div>
593593
</div>
594594
<!-- radzhiv's btn end -->
595595

596+
<!-- avishaan24-btn-1 start -->
597+
<div class="button-container">
598+
<!-- add your buttons here, eg.-->
599+
<button class="avishaan24-btn-1"> Hover Me !
600+
</button>
601+
<div class="createdby-section">
602+
Created by
603+
<a href="https://github.com/avishaan24/">avishaan24</a>
604+
</div>
605+
</div>
606+
<!-- avishaan24-btn-1 end -->
607+
608+
<!-- Aditya's btn start -->
609+
<div class="button-container">
610+
<button class="aditya-btn-1">Hover Me</button>
611+
<div class="createdby-section">
612+
Created by
613+
<a href="https://github.com/Aditya-ahirwar">Aditya-ahirwar</a>
614+
</div>
615+
</div>
616+
<!-- Aditya's btn end -->
617+
618+
596619
<!-- Gaurav Sharma's btn start-->
597620
<div class="button-container ">
598621
<button class="gauravsharmatheofficial-btn-1">
@@ -603,11 +626,12 @@
603626
<span class="gauravsharmatheofficial-btn-1-span"> Hover Me </span></button>
604627
<div class="createdby-section">
605628
Created by
606-
<a href="https://github.com/gauravsharmatheofficial"> Gaurav Sharma </a>
629+
<a href="https://github.com/gauravsharmatheofficial">gauravsharmatheofficial</a>
607630
</div>
608631
</div>
609632
<!-- Gaurav Sharma's btn end-->
610633

634+
611635
<!-- getRicha-btn-1 start -->
612636
<div class="button-container">
613637
<button class="getRicha-btn-1">Hover Me</button>
@@ -618,6 +642,18 @@
618642
</div>
619643
<!-- getRicha-btn-1 end -->
620644

645+
646+
<!--0b51d14n217's btn-->
647+
<div class="button-container">
648+
<a class="arnav-btn-1" data-back="Hover Me" data-front="Hover Me"></a>
649+
<div class="createdby-section">
650+
Created by
651+
<a href="https://github.com/0b51d14n217">0b51d14n217</a>
652+
</div>
653+
</div>
654+
<!--0b51d14n217's btn-->
655+
656+
621657
</div>
622658

623659
</main>
@@ -671,4 +707,4 @@
671707

672708
</body>
673709

674-
</html>
710+
</html>

0 commit comments

Comments
 (0)