DEV Community

Cover image for Call To Action button with pure HTML CSS
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

Posted on • Updated on • Originally published at atulcodex.com

 

Call To Action button with pure HTML CSS

Buttons are very important for any type of websites like static website, dynamic website, eCommerce website or any kind of website. Buttons are designed to make someone take action.

If you have filled any online registration or signup form you have absolutely seen some button at the end of the form like submit or signup button.

What is CTA buttons

CTA(call to action) buttons are very much similar to normal buttons, actually call to action buttons are mostly use in landing pages like these similar examples.

CTA landing page example

In this example images you can see CTA buttons on every landing page which encourage you to perform certain examples like โ€œgenerate free invoiceโ€, โ€œLetโ€™s Chatโ€, Book a demoโ€, etc, etc.

Call to action buttons are mainly used to perform some specific tasks like โ€œbook nowโ€ โ€œRegister Nowโ€ โ€œBook Your Seatโ€ โ€œClick to get the free ebookโ€ etc etc.

So letโ€™s learn how to make CTA buttons with pure HTML and CSS no single line of javascript.

CTA button snapshot

First of all open your favorite code editor to write HTML, CSS code and write this HTML boilerplate code.

html boiler plate code

After the HTML boilerplate code writes your page title, import an external CSS file and one more thing import Box Icon CDN link which will gives us SVG icons.

base html code for CTA

Button HTML code

HTML button code

Thatโ€™s it for the HTML part letโ€™s start our CSS code.

default CSS code

An HTML web page or document always takes 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

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

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

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

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.

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โ€.

Top comments (6)

Collapse
 
carlson_siu profile image
Carlson Siu

Hi Atul,

I was just reading your guide and I'm stuck here! Could you teach me how to align my CTA to the center of my page under my "Back to blog" button?

Thanks,
Carlson

Collapse
 
carlson_siu profile image
Carlson Siu

I don't know if my images are showing up...

Collapse
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

I am using this code to set every element in center

body
{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #F3F3F4;
}

Collapse
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

Hey carlson, I have used CSS flexbox to align center

But if you are confused in this things, please contact me at this email

atulkprajapati2000@gmail.com

Collapse
 
darkwiiplayer profile image
๐’ŽWii ๐Ÿณ๏ธโ€โšง๏ธ

Pretty nice, but I wouldn't recommend using px units. If you use em instead, margins will scale along if you just change the font-size of the button, which is often what you'll want :D

Collapse
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

oh ok thanks for sharing your experiences :) I'll keep in mind. Thank you

Why You Need to Study Javascript Fundamentals

The harsh reality for JS Developers: If you don't study the fundamentals, you'll be just another โ€œCoderโ€. Top learnings on how to get to the mid/senior level faster as a JavaScript developer by Dragos Nedelcu.