made button changes
This commit is contained in:
parent
b7a78a4455
commit
6ea9533c06
33
index.html
33
index.html
@ -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
40
styles/button.css
Normal 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;
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user