How To Design - Simple CTA Button

Learn how to create a Simple CTA Button with HTML, CSS

How To Create a Simple CTA Button

Step 1) Add HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Simple CTA Button</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="images/favicon.png" type="image/png" sizes="16x16">
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <div class="container">
        <section>
            <h1>How to make a Simple CTA Button Using HTML and CSS</h1>
            <a href="#" class="btn">Read More</a>
        </section>
    </div>
    
</body>

</html>

Step 2) Add CSS:

/*

This is a Simple CTA Button using HTML, CSS. You can freely use it in your project.
It is made with ♥ by Learn Computer Academy. Visit our website: www.learncomputer.in

*/


/* Normalization */

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    color: #000;
    line-height: 1.3;
    background-color: #fcfcfc;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    display: inline-block;
}
 
.container {
            max-width: 75%;
            margin: 0 auto;
        }
        
h1 {
    font-size: 45px;
    color: #262626;
    line-height: 1.2;
    margin: 0 0 50px 0;
}

section {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.btn {
    text-decoration: none;
    display: inline-block;
    font-family: "Poppins", sans-serif;
    font-size: 30px;
    color: #f1f0f0;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 2px;
    background-color: #006686;
    border: none;
    outline: 1px solid #fff;
    outline-offset: -8px;
    padding: 30px 54px;
    margin: 0;
    transition: all 300ms ease-in-out;
}

.btn:hover {
    background-color: #01536d;
    outline: 1px solid #006686;
    outline-offset: 8px;
    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, .25);
}

Previous Next