stylingLinks&Buttons.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Links and Buttons</title>
    <style>
        .divClass
        {
            border: solid;
            background-color: rgb(245, 217, 217);
            padding: 33px;
            margin: 30px auto;
            width: 666px;
            border-color: brown;
        }
        .bclass:hover
        {
            background-color: blueviolet;
        }
        a:hover
        {
            background-color: azure;
        }
        a:visited
        {
            background-color: yellow;
        }
        button:hover
        {
            background-color: azure;
        }
        .bclass
        {
            padding: 10px;
            border: double;
            border-color: black;
            margin: auto;
            background-color:yellowgreen;
            cursor: pointer;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            
        }
    </style>
</head>
<body>
    <div class="divClass" id="divId">
        <h1>Links and Buttons</h1>
        <p class="pclass" id="pId">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil eius vel exercitationem veritatis tempora nostrum, cumque a, voluptatem maxime atque, ea 
            totam quidem dolore quis laborum. Quidem ut, id esse fugiat molestias repudiandae!</p>
            <button class="bclass">Contact Us</button>
            <a href="heelo.com" class="bclass" target="_blank">Read More</a>
    </div>
</body>
</html>