made button changes

This commit is contained in:
Lucas Kent 2022-11-16 10:16:41 -05:00 committed by GitHub
parent b7a78a4455
commit 6ea9533c06
2 changed files with 43 additions and 30 deletions

View File

@ -11,12 +11,14 @@
<meta name="theme-color" content="#ff0000">
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/border.css">
<link rel="stylesheet" href="styles/button.css">
</head>
<body>
<h2>Home</h2>
<img src="imgs/zuck.jpg" alt="Mark Zuckerberg Chilling" style="width:300px;height:300px;" srcset="" class="broider">
<p class="double">Welcome to my Website.</p>
<a href='sitemap.html'><button class="button">Sitemap</button></a>
<a href='./index.html'><button class="button:active>Home</button></a>
<a href='./sitemap.html'><button class="button">Sitemap</button></a>
</body>
<style>
html, body {
@ -40,35 +42,6 @@
100% {
background-position: 0% 50%;
}
}
</style>
<style>
.button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #04AA6D;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.noscroll::-webkit-scrollbar {
display: none;
}
.noscroll {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</html>

40
styles/button.css Normal file
View File

@ -0,0 +1,40 @@
.button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #04AA6D;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.noscroll::-webkit-scrollbar {
display: none;
}
.noscroll {
-ms-overflow-style: none;
scrollbar-width: none;
}
.buttontwo {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #3e8e41;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}