An example on how to create your own buttons using html and css.
- Create your basic .html file. in this case I called it “refresh.html”.
- Look at the sample code on how to setup the header file.
- For the fonts I used Google fonts from their CDN.
- The content is styled inside the .html file, normally you would create a separate .css file for your assets and reference to it.
- The overflow on the body is set to “hidden” which means there are no scrollbars visible and scrolling is disabled.
- The text decoration for various elements is set to “none” so you don’t see the lines if you for instance click on a link.
- Hover with the mouse over the refresh button will change the text color to red.
- The transition is smoothed by using the transition settings, remember to also put this setting on the main element.
- Clicking the button will refresh the page by using “location.reload”, this will reload the current URL.
- For optimal responsiveness I used the “vw” css unit, 1 vw is relative to 1% of the viewport width. The viewport is the user’s visible area of a web page. This way this example is perfectly viewable on a mobile device.
The full code sample is below.
<!DOCTYPE html>
<html lang="en">
<head>
<!--metadata-->
<title>refresh button</title>
<meta charSet="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--google fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<style>
@media (prefers-color-scheme: dark) {
html, body {
height: 100%;
width: auto;
color: #FFFFFFFF;
overflow: hidden;
font-family: 'Raleway', sans-serif;
text-rendering: geometricPrecision;
background-color: #03488f;
}
a, a:hover, a:focus, a:active, a:visited, a:link {
text-decoration: none;
}
.refreshButton {
left: 50%;
top: 20%;
cursor: pointer;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 1.105vw 0.205vw rgb(35, 47, 62);
background-color: #232f3e;
width: 7vw;
height: 3vw;
border-left: 0.4vw solid #b60ee5;
border-radius: 0.315vw;
font-weight: bolder;
font-size: 1.1vw;
line-height: 3vw;
text-align: center;
transition: 0.7s ease-in-out transform, 0.7s ease-in-out;
}
.refreshButton:hover {
color: red;
transition: 0.7s ease-in-out transform, 0.7s ease-in-out;
}
}
</style>
<div class="refreshButton" onclick="location.reload()">
Refresh
</div>
</head>
<body>Stay Safe! ☘️
