A Call-to-Action in pure HTML and CSS by@atulcodex

A Call-to-Action in pure HTML and CSS

Read on Terminal Reader
Open TLDR
react to story with heart
react to story with light
react to story with boat
react to story with money
CTA buttons are designed to make someone take some type of action. They are used for static websites, dynamic websites, eCommerce websites etc. Buttons are mainly used to perform some specific task like “Book Now” “Register Now’ “Click to get the free ebook” and “Let’s Chat a demo” are common phrases used to encourage you to perform certain tasks such as “Generate free invoice,” or ‘Book a demo,’ etc.
image
Atul Prajapati HackerNoon profile picture

Atul Prajapati

started learning Web Development again from scratch, sharing my journey and knowledge in the form of blog articles.

linkedin social icongithub social iconinstagram social iconfacebook social icontwitter social icon


Buttons are very important for any website.


They are used for static websites, dynamic websites, eCommerce websites etc. Buttons are designed to make someone take some type of action.


What are CTA Buttons?

CTA(call to action) buttons are similar to normal buttons. Call to action buttons are mostly used in landing pages.

CTA landing page example

CTA landing page example

In the below images you can see CTA buttons on every landing page that encourage you to perform certain tasks like “generate free invoice,” “Let’s Chat,” “Book a demo,” etc.


CTA buttons are mainly used to perform some specific task like “Book Now” “Register Now” “Book Your Seat” “Click to get the free ebook” etc.


Let’s learn how to make CTA buttons with pure HTML and CSS, using no single line of javascript.


CTA button snapshot

CTA button snapshot

First of all, open your favorite code editor and copy this HTML boilerplate code.

html boilerplate code

html boilerplate code

After the HTML boilerplate code writes your page title, import an external CSS file. Following this: import the Box Icon CDN link which will give us SVG icons.

base html code for CTA

base html code for CTA

Button HTML Code

HTML button code

HTML button code

That’s it for the HTML part let’s start our CSS code.

default CSS code

default CSS code

An HTML web page or document requires default margin and padding.


So first of all we will set the 0 zero to margin and padding of HTML body.


‘box-sizing: border-box;’ is used because sometimes when child element or div is bigger than parent div it overflow the size of parent div. That’s why border-box prevent child element to overflow from parent div.


Now we will beautify our HTML body to show our CTA button at the center of the web page. We have used CSS flexbox, the height will be 100vh, the width is 100% and the background colour is white grey.

CTA button web page styling

CTA button web page styling

So we have designed a body of the web page now we will work on our CTA button element.

CTA button CSS code

CTA button CSS code

All this code is easy to understand but don’t worry if you are stuck anywhere at any point of this code snippet you can simply comment your queries I will definitely solve it.


After that, we will add some hover effect on our call to action button.

CTA button hover effect

CTA button hover effect

We have just disabled the button box-shadow and the cursor will be a pointer on hover.


And one more thing let’s add some font size in the button icon and padding from the right side because it is looking close to the text.

box icon size

box icon size

So that’s how you can design and develop a CTA(call to action) button with just pure HTML and CSS. And this is the exact CTA button with source CodePen Source code.


Source Code

Finally congratulations you have invested your priceless time and learned about how to make a CTA button with pure HTML & CSS.


Again If you find any issues with the code and my explanation or you have any suggestion you just have to comment below your issues, suggestion and ideas.


And I love to solve your queries!


Take care and KEEP CODING!



react to story with heart
react to story with light
react to story with boat
react to story with money

Related Stories

L O A D I N G
. . . comments & more!