HTML Element Style How to - Make a href link that will act like a button

Question

We would like to know how to make a href link that will act like a button.

Answer


<html>
<style>
    .lnkbtn{<!-- w ww . ja  v a 2  s  .c o m-->
        display: block;
        width: 100px;
        background-color: lightgrey;
        border: 1px solid black;
        text-align: center;
        text-decoration: none;
        padding: 5px 0px 5px 0px;
    }

    .lnkbtn:hover{
        background-color: #aaa;
    }

    .lnkbtn:visited{
        color: blue;
    }

    .lnkbtn:active{
        border: 1px solid red;
    }

</style>
<body>
    <a href = "http://www.cnn.com" class = "lnkbtn">Click me!</a>
</body>
</html>

The code above is rendered as follows: