Button effect CSS

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Button effect</title>

    <style>

        .container {

            width: 900px;

            border: 3px solid black;

            margin: 15px auto;

            padding: 5px 10px;

            background-color: rgb(248, 236, 236);

        }

        a {

            text-decoration: none;

            color: white;

        }

        a:hover {

            color: yellow;

        }

        a:active {

            background-color: green;

        }

        a:visited {

            background-color: indigo;

        }

        .btn {

            border: 2px solid black;

            border-radius: 3px;

            cursor: pointer;

            background-color: red;

            padding: 5px;

            font-size: 12px;

            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

            color: white;

        }

        .btn:hover {

            color: yellow;

            border: 3px solid black;

        }

        .btn:active {

            background-color: green;

        }

    </style>

</head>

<body>

    <div class="container">

        <h2>This is my frist blog</h2>

        <p id="containerpara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum illum laborum,

            officiis neque alias necessitatibus saepe eius quidem. Ipsam exercitationem sit obcaecati quas consequatur

            similique recusandae veniam, dolor doloremque tenetur illo fugit error nihil?</p>

        <a href="Https://Linkedin.com " target="_blank" class="btn">Read more</a>

        <button class="btn">Next</button>

    </div>

</body>

</html>