Skip to content

Commit

Permalink
Merge pull request #157 from vishal2005025/button
Browse files Browse the repository at this point in the history 
Closes Issue #147
  • Loading branch information
@swarnade
swarnade authored Feb 7, 2024
2 parents b77bf47 + 57663ee commit cd169be
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 28 deletions.
49 changes: 49 additions & 0 deletions design_button/vishal.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
.h{
background: #efefef;
height:85px;
padding-top:0.9em;
margin-top: -2em;
margin-bottom: -1.5em;
width:285px;
margin-left: -1.85em;
justify-content: center;
align-items: center;
}

.btn80 {
padding: 1em 1em;
background: #efefef;
border: none;
border-radius: .5rem;
color: #444;
font-size: 1rem;
font-weight: 700;
letter-spacing: .2rem;
text-align: center;
outline: none;
cursor: pointer;
transition: .2s ease-in-out;
box-shadow: -6px -6px 14px rgba(255, 255, 255, .7),
-6px -6px 10px rgba(255, 255, 255, .5),
6px 6px 8px rgba(255, 255, 255, .075),
6px 6px 10px rgba(0, 0, 0, .15);
}
.btn80:hover {
box-shadow: -2px -2px 6px rgba(255, 255, 255, .6),
-2px -2px 4px rgba(255, 255, 255, .4),
2px 2px 2px rgba(255, 255, 255, .05),
2px 2px 4px rgba(0, 0, 0, .1);
}
.btn80:active {
box-shadow: inset -2px -2px 6px rgba(255, 255, 255, .7),
inset -2px -2px 4px rgba(255, 255, 255, .5),
inset 2px 2px 2px rgba(255, 255, 255, .075),
inset 2px 2px 4px rgba(0, 0, 0, .15);
}
@media (max-width: 600px){
.h{
width:500px;
margin-right: -1em;

}
}
80 changes: 52 additions & 28 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,9 @@
<!-- CSS file by Sanglap-Halder -->
<link rel="stylesheet" href="./design_button/Sanglap-Halder.css">

<!--CSS file by vishal malyan-->
<link rel="stylesheet" href="./design_button/vishal.css">

</head>

<body>
Expand Down Expand Up @@ -1330,13 +1333,33 @@ <h1 class="card-title">Social Media Share hover</h1>
</div>
</div>
</div>
<!--------------------------------------vishal neumorphism button ---------------------->

<!----------------- ********************* Ratnojit Saha New 5 buttons ****************** ------------------------->
<div class="col-12 col-md-3 main-row ">
<div class=" box-main neu " data-aos="zoom-in">
<div class="h">
<button class="btn80">Neumorphism</button>
</div>
<br />
<div class="designed-by">
<p1>Designed By Vishal Malyan</p1>
</div>
<div>
<a href="https://github.com/vishal2005025">
<img src="./assets/github.png" class="img-github">
</a>
<a href="https://www.linkedin.com/in/">
<img src="./assets/linkedin.png" class="img-linkedin">
</a>
</div>
</div>
</div>
<!----------------- ********************* Ratnojit Saha New 5 buttons ****************** ------------------------->

<div class="col-12 col-md-3 main-row">
<div class=" box-main" data-aos="zoom-in">
<a href="./design_button/RatnojitSaha-11.css">
<button class="button-1" role="button">Button</button>
<button class="button-1" role="button">Button</button>
</a>
<br />
<div class="designed-by">
Expand All @@ -1357,7 +1380,7 @@ <h1 class="card-title">Social Media Share hover</h1>
<div class="col-12 col-md-3 main-row">
<div class=" box-main" data-aos="zoom-in">
<a href="./design_button/RatnojitSaha-11.css">
<button class="button-2">Button</button>
<button class="button-2">Button</button>
</a>
<br />
<div class="designed-by">
Expand All @@ -1377,7 +1400,7 @@ <h1 class="card-title">Social Media Share hover</h1>
<div class="col-12 col-md-3 main-row">
<div class=" box-main" data-aos="zoom-in">
<a href="./design_button/RatnojitSaha-13.css">
<button class="button-3">Button</button>
<button class="button-3">Button</button>
</a>
<br />
<div class="designed-by">
Expand All @@ -1393,24 +1416,24 @@ <h1 class="card-title">Social Media Share hover</h1>
</div>
</div>
</div>

<div class="col-12 col-md-3 main-row">
<div class=" box-main" data-aos="zoom-in">
<a href="./design_button/RatnojitSaha-14.css">
<ul class="wrapper">
<li class="icon facebook">
<span class="tooltip">Facebook</span>
<span><i class="fab fa-facebook-f"></i></span>
<span class="tooltip">Facebook</span>
<span><i class="fab fa-facebook-f"></i></span>
</li>
<li class="icon twitter">
<span class="tooltip">Twitter</span>
<span><i class="fab fa-twitter"></i></span>
<span class="tooltip">Twitter</span>
<span><i class="fab fa-twitter"></i></span>
</li>
<li class="icon instagram">
<span class="tooltip">Instagram</span>
<span><i class="fab fa-instagram"></i></span>
<span class="tooltip">Instagram</span>
<span><i class="fab fa-instagram"></i></span>
</li>
</ul>
</ul>
</a>
<br />
<div class="designed-by">
Expand All @@ -1430,7 +1453,7 @@ <h1 class="card-title">Social Media Share hover</h1>
<div class="col-12 col-md-3 main-row">
<div class=" box-main" data-aos="zoom-in">
<a href="./design_button/RatnojitSaha-15.css">
<button class="button-5 type1">Button</button>
<button class="button-5 type1">Button</button>
</a>
<br />
<div class="designed-by">
Expand All @@ -1450,29 +1473,30 @@ <h1 class="card-title">Social Media Share hover</h1>
<!-- Button by Sanglap-Halder -->
<div class="col-12 col-md-3 main-row">
<div class=" box-main">
<a href="./design_button/Sanglap-Halder.css" style="text-decoration: none;">
<button id="Sanglap-Halder"> Button </button>
<a href="./design_button/Sanglap-Halder.css" style="text-decoration: none;">
<button id="Sanglap-Halder"> Button </button>
</a>
<br />
<p1 class="designed-by"> Designed by Sanglap Halder</p1>
<div>
<a href="https://github.com/Sanglap-Halder">
<img src="./assets/github.png" class="img-github">
</a>
<br />
<p1 class="designed-by"> Designed by Sanglap Halder</p1>
<div>
<a href="https://github.com/Sanglap-Halder">
<img src="./assets/github.png" class="img-github">
</a>
<a href="https://www.linkedin.com/in/sanglap-halder/">
<img src="./assets/linkedin.png" class="img-linkedin">
</a>
</div>
<a href="https://www.linkedin.com/in/sanglap-halder/">
<img src="./assets/linkedin.png" class="img-linkedin">
</a>
</div>
</div>
</div>



</div>
</div>
</section>
</div>


<footer class="footer">
<div class="waves">
<div class="wave" id="wave1"></div>
Expand Down Expand Up @@ -1507,7 +1531,7 @@ <h1 class="card-title">Social Media Share hover</h1>

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script src="./app.js"></script>
<script src="./app.js"></script>
<script>
function filterCards() {
var input, filter, cards, card, title, i, txtValue;
Expand Down Expand Up @@ -1540,7 +1564,7 @@ <h1 class="card-title">Social Media Share hover</h1>
</script>
<script src="./assets/bootstrap/bootstrap.bundle.min.js"></script>
<script src="Scroll.js"></script>

</body>

</html>

0 comments on commit cd169be

Please sign in to comment.