This website is the best viewed in bigger devices.

How To Design - Simple CTA Button

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

simple btn

How To Create a Simple CTA Button

Step 1) Add HTML

<!DOCTYPE html>

    <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=",700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">


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


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:


/* Normalization */

*::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);