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:
xxxxxxxxxx1
.custom-button {2
padding: 2px 6px; /* space around element's content */3
border: 1px solid #767676; /* border width, style and color */4
border-radius: 3px; /* rounds corners */5
background: #e7e9e7; /* background color */6
text-decoration: none; /* removes link underline */7
font-family: Arial; /* font family */8
font-size: 13.3px; /* font size */9
color: black; /* font color */10
cursor: pointer; /* mouse cursor over button */11
}12
13
.custom-button:hover {14
background: #e2e4e2; /* background color on mouse hover */15
}
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.custom-button {7
padding: 2px 6px; /* space around element's content */8
border: 1px solid #767676; /* border width, style and color */9
border-radius: 3px; /* rounds corners */10
background: #e7e9e7; /* background color */11
text-decoration: none; /* removes link underline */12
font-family: Arial; /* font family */13
font-size: 13.3px; /* font size */14
color: black; /* font color */15
cursor: pointer; /* mouse cursor over button */16
}17
18
.custom-button:hover {19
background: #e2e4e2; /* background color on mouse hover */20
}21
22
</style>23
</head>24
<body>25
<!-- Normal link styled with CSS -->26
<a class="custom-button" href="https://dirask.com/posts/D9aA0D">Click me!</a>27
</body>28
</html>
