Skip to content

Commit e56aaf0

Browse files
Rajkumar-justcoderRajkumar-justcoder
authored
Merge pull request Design-and-Code#101 from dilshad360/main
add new button
2 parents cfba312 + 43b8012 commit e56aaf0

File tree

2 files changed

+110
-62
lines changed

2 files changed

+110
-62
lines changed

‎buttons/buttons.css

Lines changed: 100 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1315,31 +1315,31 @@ a:focus-visible {
13151315
background-color: transparent;
13161316
border: 3px solid #00d7c3;
13171317
border-radius: 50px;
1318-
transition: all 0.15s ease-in-out;
1318+
transition: all 0.15s ease-in-out;
13191319
color: black;
13201320
background-image: linear-gradient(30deg, #00d7c3 50%, transparent 50%);
13211321
background-size: 500px;
13221322
background-repeat: no-repeat;
13231323
background-position: 0%;
1324-
}
1325-
.ankush-btn-1:hover {
1324+
}
1325+
.ankush-btn-1:hover {
13261326
color: white;
13271327
background-color: black;
13281328
box-shadow: 0 0 10px 0 #00d7c3 inset, 0 0 20px 2px #00d7c3;
13291329
border: 3px solid #00d7c3;
13301330
animation: ankush-btn-1-pulse 1s infinite;
13311331
transition: 0.3s;
13321332
background-position: 100%;
1333-
}
1334-
@keyframes ankush-btn-1-pulse {
1333+
}
1334+
@keyframes ankush-btn-1-pulse {
13351335
0% {
1336-
transform: scale(1);
1336+
transform: scale(1);
13371337
}
13381338
70% {
1339-
transform: scale(0.9);
1339+
transform: scale(0.9);
13401340
}
13411341
100% {
1342-
transform: scale(1);
1342+
transform: scale(1);
13431343
}
13441344
}
13451345

@@ -1681,7 +1681,6 @@ a:focus-visible {
16811681
}
16821682
/* Harsh Jain's button 2 ends*/
16831683

1684-
16851684
/* Nitish btn start */
16861685
.Nitish-btn-26 {
16871686
display: inline-block;
@@ -1723,58 +1722,68 @@ a:focus-visible {
17231722
}
17241723
/*Nitish's btn end */
17251724

1726-
17271725
/*Thiago's btn start*/
17281726
.Okan-btn-1 {
17291727
background-color: #b4befe;
17301728
border: none;
17311729
border-radius: 5px;
17321730
padding: 20px 30px;
1733-
transition: .5s;
1731+
transition: 0.5s;
17341732
cursor: pointer;
17351733
font-family: JetBrains, monospace;
1736-
17371734
}
1738-
.Okan-btn-1:hover{
1735+
.Okan-btn-1:hover {
17391736
background-color: #94e2d5;
1740-
transition: .5s;
1741-
-webkit-box-shadow: rgb(40, 159, 237) 5px 5px 0px 0px, rgb(95, 184, 255) 10px 10px 0px 0px, rgb(161, 216, 255) 15px 15px 0px 0px, rgb(202, 230, 255) 20px 20px 0px 0px, rgb(225, 238, 255) 25px 25px 0px 0px, 5px 5px 15px 5px rgba(0,0,0,0);
1742-
box-shadow: rgb(40, 159, 237) 5px 5px 0px 0px, rgb(95, 184, 255) 10px 10px 0px 0px, rgb(161, 216, 255) 15px 15px 0px 0px, rgb(202, 230, 255) 20px 20px 0px 0px, rgb(225, 238, 255) 25px 25px 0px 0px, 5px 5px 15px 5px rgba(0,0,0,0);
1737+
transition: 0.5s;
1738+
-webkit-box-shadow: rgb(40, 159, 237) 5px 5px 0px 0px,
1739+
rgb(95, 184, 255) 10px 10px 0px 0px,
1740+
rgb(161, 216, 255) 15px 15px 0px 0px,
1741+
rgb(202, 230, 255) 20px 20px 0px 0px,
1742+
rgb(225, 238, 255) 25px 25px 0px 0px, 5px 5px 15px 5px rgba(0, 0, 0, 0);
1743+
box-shadow: rgb(40, 159, 237) 5px 5px 0px 0px,
1744+
rgb(95, 184, 255) 10px 10px 0px 0px,
1745+
rgb(161, 216, 255) 15px 15px 0px 0px,
1746+
rgb(202, 230, 255) 20px 20px 0px 0px,
1747+
rgb(225, 238, 255) 25px 25px 0px 0px, 5px 5px 15px 5px rgba(0, 0, 0, 0);
17431748
}
17441749

1745-
17461750
/*Thiago's btn start*/
17471751

1748-
17491752
/* cyphers 2nd btn start */
1750-
.cypher-2-btn{
1751-
font-size:1.2rem;
1753+
.cypher-2-btn {
1754+
font-size: 1.2rem;
17521755
padding: 1em 2.5em;
17531756
background-color: #2874a6;
17541757
cursor: pointer;
1755-
position:relative;
1756-
border:none;
1757-
background-color: #343A40;
1758-
border-radius: 4px;
1758+
position: relative;
1759+
border: none;
1760+
background-color: #343a40;
1761+
border-radius: 4px;
17591762
color: #fff;
17601763
padding: 8px 16px;
17611764
}
17621765

1763-
.cypher-2-btn:hover{
1764-
background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
1765-
animation:slidebg 5s linear infinite;
1766+
.cypher-2-btn:hover {
1767+
background-image: linear-gradient(
1768+
90deg,
1769+
#00c0ff 0%,
1770+
#ffcf00 49%,
1771+
#fc4f4f 80%,
1772+
#00c0ff 100%
1773+
);
1774+
animation: slidebg 5s linear infinite;
17661775
}
17671776

17681777
/* cypherrs 2nd bt end */
17691778

1770-
17711779
/* kkartik07's 1st btn start */
17721780
.kkartik07-btn-1 {
17731781
padding: 18px 32px;
17741782
font-size: 30px;
17751783
border: none;
17761784
outline: none;
1777-
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
1785+
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
1786+
'Lucida Sans', Arial, sans-serif;
17781787
cursor: pointer;
17791788
margin: 8px 15px;
17801789
transition: 0.2s ease;
@@ -1783,26 +1792,25 @@ box-shadow: rgb(40, 159, 237) 5px 5px 0px 0px, rgb(95, 184, 255) 10px 10px 0px 0
17831792
position: relative;
17841793
overflow: hidden;
17851794
box-shadow: rgba(110, 110, 119, 0.452) 0px 8px 30px 0px;
1786-
}
1787-
.kkartik07-btn-1::before {
1795+
}
1796+
.kkartik07-btn-1::before {
17881797
width: 200%;
17891798
height: 200%;
1790-
content: "";
1799+
content: '';
17911800
transform: rotate(-45deg);
17921801
position: absolute;
17931802
top: -10%;
17941803
left: -180%;
17951804
background: rgba(119, 129, 238, 0.2);
17961805
transition: 0.3s ease-in-out;
1797-
}
1798-
.kkartik07-btn-1:hover::before {
1806+
}
1807+
.kkartik07-btn-1:hover::before {
17991808
left: 55%;
1800-
}
1809+
}
18011810
/* kkartik07's 1st btn end */
18021811

1803-
18041812
/* Deepak Kumar btn start */
1805-
.DeepakKumar-button-31 {
1813+
.DeepakKumar-button-31 {
18061814
position: absolute;
18071815
transform: translate(-50%, -50%);
18081816
padding: 1em 1em;
@@ -1858,17 +1866,16 @@ box-shadow: rgb(40, 159, 237) 5px 5px 0px 0px, rgb(95, 184, 255) 10px 10px 0px 0
18581866

18591867
/* Deepak Kumar btn end */
18601868

1861-
18621869
/* Shridhar's btn start */
1863-
.shridhar-btn{
1864-
font-size:1.2rem;
1870+
.shridhar-btn {
1871+
font-size: 1.2rem;
18651872
cursor: pointer;
1866-
position:relative;
1873+
position: relative;
18671874
display: flex;
18681875
transition: 1s;
18691876
}
18701877

1871-
.shridhar-btn::before{
1878+
.shridhar-btn::before {
18721879
content: 'Follow';
18731880
display: flex;
18741881
justify-content: center;
@@ -1879,11 +1886,11 @@ box-shadow: rgb(40, 159, 237) 5px 5px 0px 0px, rgb(95, 184, 255) 10px 10px 0px 0
18791886
width: 100%;
18801887
height: 100%;
18811888
z-index: 10;
1882-
background: rgba(40,40, 40,1);
1889+
background: rgba(40, 40, 40, 1);
18831890
transition: 0.2s;
18841891
border-radius: 3px;
18851892
}
1886-
.shridhar-btn:hover::before{
1893+
.shridhar-btn:hover::before {
18871894
opacity: 0;
18881895
pointer-events: none;
18891896
}
@@ -1902,24 +1909,20 @@ box-shadow: rgb(40, 159, 237) 5px 5px 0px 0px, rgb(95, 184, 255) 10px 10px 0px 0
19021909
filter: brightness(200%);
19031910
}
19041911

1905-
1906-
.shridhar-btn-youtube{
1912+
.shridhar-btn-youtube {
19071913
background: rgb(255, 0, 0);
19081914
border-radius: 5px 0px 0px 5px;
19091915
}
19101916

1911-
1912-
.shridhar-btn-twitter{
1917+
.shridhar-btn-twitter {
19131918
background: rgb(29, 161, 242);
19141919
border-radius: 0px 5px 5px 0px;
19151920
}
19161921

19171922
/* Shridhar's btn end */
19181923

1919-
1920-
19211924
/* haldaranup 1st button starts here */
1922-
.haldaranup-btn-1{
1925+
.haldaranup-btn-1 {
19231926
font-size: 1.25rem;
19241927
padding: 16px 36px;
19251928
background-color: rgb(117, 0, 172);
@@ -1930,14 +1933,14 @@ box-shadow: rgb(40, 159, 237) 5px 5px 0px 0px, rgb(95, 184, 255) 10px 10px 0px 0
19301933
transition: all 500ms;
19311934
}
19321935

1933-
.haldaranup-btn-1:hover{
1936+
.haldaranup-btn-1:hover {
19341937
background-color: rgb(255, 238, 0);
19351938
color: #000757;
19361939
}
19371940

19381941
/* haldaranup 1st button ends here */
19391942
/* Nitish-btn-2 start */
1940-
.Nitish-btn-2{
1943+
.Nitish-btn-2 {
19411944
display: inline-block;
19421945
background-color: #7b38d8;
19431946
border-radius: 50px;
@@ -1949,9 +1952,8 @@ box-shadow: rgb(40, 159, 237) 5px 5px 0px 0px, rgb(95, 184, 255) 10px 10px 0px 0
19491952
width: 150px;
19501953
cursor: pointer;
19511954
margin: 5px;
1952-
19531955
}
1954-
.Nitish-btn-2:hover{
1956+
.Nitish-btn-2:hover {
19551957
border: 4px solid #ea972a;
19561958
background-color: #90d838;
19571959
color: #000000;
@@ -1960,7 +1962,6 @@ box-shadow: rgb(40, 159, 237) 5px 5px 0px 0px, rgb(95, 184, 255) 10px 10px 0px 0
19601962
}
19611963
/* Nitish-btn-2 end */
19621964

1963-
19641965
/* Shani button starts */
19651966

19661967
.button-Shani {
@@ -1991,7 +1992,7 @@ box-shadow: rgb(40, 159, 237) 5px 5px 0px 0px, rgb(95, 184, 255) 10px 10px 0px 0
19911992
bottom: 0;
19921993
right: 50%;
19931994
left: 50%;
1994-
content: "";
1995+
content: '';
19951996
background-color: #43fbf2;
19961997
}
19971998

@@ -2004,14 +2005,14 @@ box-shadow: rgb(40, 159, 237) 5px 5px 0px 0px, rgb(95, 184, 255) 10px 10px 0px 0
20042005
}
20052006

20062007
/* Sumit1 btn start */
2007-
.Sumit-btn-1{
2008+
.Sumit-btn-1 {
20082009
background-color: #26d023;
20092010
border: 3px solid red;
20102011
width: 200px;
20112012
padding: 20px;
20122013
font-size: 30px;
20132014
}
2014-
.Sumit-btn-1:hover{
2015+
.Sumit-btn-1:hover {
20152016
background-color: yellow;
20162017
transform: all 2s;
20172018
}
@@ -2026,24 +2027,61 @@ box-shadow: rgb(40, 159, 237) 5px 5px 0px 0px, rgb(95, 184, 255) 10px 10px 0px 0
20262027
background-color: red;
20272028
font-size: 30px;
20282029
}
2029-
.Sumit-btn-2:hover{
2030+
.Sumit-btn-2:hover {
20302031
background-color: gray;
20312032
}
20322033
/* Sumit-btn-2 end */
20332034

20342035
/* Sumit-btn-3 start */
20352036
.Sumit-btn-3 {
20362037
/* text-size-adjust: 20px; */
2037-
background-color: #00C0FF;
2038+
background-color: #00c0ff;
20382039
border: 3px solid rgb(80, 236, 29);
20392040
width: 170px;
20402041
padding: 20px;
20412042
border-radius: 70px;
20422043
font-size: 20px;
20432044
}
2044-
.Sumit-btn-3:hover{
2045+
.Sumit-btn-3:hover {
20452046
background-color: white;
20462047
}
20472048

20482049
/* Sumit-btn-3 end */
20492050

2051+
/* Dilshad360 Button start */
2052+
.dilshad360-btn-1 {
2053+
display: block;
2054+
width: 150px;
2055+
height: 50px;
2056+
line-height: 40px;
2057+
font-size: 18px;
2058+
font-family: sans-serif;
2059+
text-decoration: none;
2060+
color: #333;
2061+
letter-spacing: 2px;
2062+
text-align: center;
2063+
position: relative;
2064+
transition: all 0.35s;
2065+
}
2066+
.dilshad360-btn-1:after {
2067+
position: absolute;
2068+
content: '';
2069+
top: 0;
2070+
left: 0;
2071+
width: 0;
2072+
height: 100%;
2073+
background: #0bceaf;
2074+
transition: all 0.35s;
2075+
}
2076+
.dilshad360-btn-1 span {
2077+
position: relative;
2078+
z-index: 2;
2079+
}
2080+
.dilshad360-btn-1:hover {
2081+
color: #ffff;
2082+
}
2083+
2084+
.dilshad360-btn-1:hover:after {
2085+
width: 100%;
2086+
}
2087+
/* Dilshad360 Button end */

‎index.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -533,6 +533,16 @@
533533
</div>
534534
</div>
535535
<!-- Sumit3 btn end -->
536+
537+
<!-- dilshad360 button start -->
538+
<div class="button-container">
539+
<button class="dilshad360-btn-1"><span>Hover Me</span></button>
540+
<div class="createdby-section">
541+
Created by
542+
<a href="https://github.com/dilshad360">dilshad360</a>
543+
</div>
544+
</div>
545+
<!-- dilshad360 button end -->
536546

537547

538548

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

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

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


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy