Styling Links and Buttons in CSS

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pseudo selectors & more designing</title>
    <link rel="stylesheet" href="CSS/styleEight.css">
</head>

<body>
    <div class="container" id="cont1">
        <h3>This is my heading</h3>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minima fugit hic culpa debitis saepe qui ducimus
            corporis! Aut totam odio laboriosam, facilis quibusdam eos repudiandae officiis dicta magni, cumque error
            rem iste sapiente? Repellendus?</p>
        <a href="https://google.com" class="btn">Read more</a>
        <button class="btn">Contact us</button>
    </div>
</body>

</html>




CSS File
.container {
    border: 2px solid red;
    background-color: rgb(223, 245, 201);
    padding: 34px;
    margin: 34px auto;
    width: 666px;
}

a {
    text-decoration: none;
    color: black;
}

a:hover {
    color: rgb(5, 0, 0);
    background-color: rgb(221, 166, 38);
}

a:visited {
    background-color: yellow;
}

a:active {
    background-color: darkblue;
}

.btn {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    background-color: crimson;
    padding: 6px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    border-radius: 4px;
}

.btn:hover {
    color: darkgoldenrod;
    background-color: rgb(223, 245, 201);
    border: 2px solid black;
}





Comments

Post a Comment