EN
CSS - link with button style
3
points
In this article, we would like to show you how to create link with button style using CSS - button that acts like link.
Quick solution:
.custom-button {
padding: 2px 6px; /* space around element's content */
border: 1px solid #767676; /* border width, style and color */
border-radius: 3px; /* rounds corners */
background: #e7e9e7; /* background color */
text-decoration: none; /* removes link underline */
font-family: Arial; /* font family */
font-size: 13.3px; /* font size */
color: black; /* font color */
cursor: pointer; /* mouse cursor over button */
}
.custom-button:hover {
background: #e2e4e2; /* background color on mouse hover */
}
Practical example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.custom-button {
padding: 2px 6px; /* space around element's content */
border: 1px solid #767676; /* border width, style and color */
border-radius: 3px; /* rounds corners */
background: #e7e9e7; /* background color */
text-decoration: none; /* removes link underline */
font-family: Arial; /* font family */
font-size: 13.3px; /* font size */
color: black; /* font color */
cursor: pointer; /* mouse cursor over button */
}
.custom-button:hover {
background: #e2e4e2; /* background color on mouse hover */
}
</style>
</head>
<body>
<!-- Normal link styled with CSS -->
<a class="custom-button" href="https://dirask.com/posts/D9aA0D">Click me!</a>
</body>
</html>