When users want to take the action against something then this button is available for them. It might have different types of design but the functionality will remain the same in all the buttons. In the last post, we discussed how to create a 3D carousel Html CSS JavaScript. Let us discuss how to create a call to action button in CSS.
Call to action button CSS:
As you can see in the image we have created an animated box with a call to action button in HTML and CSS languages. This button has a very unique design and attractive look. Let us see why we have used HTML and CSS for creating this button inside a box.
Html:
As HTML is a markup language and we have used this language to design our button and its box. The layout of the box is created in HTML and also the button is created in HTML without proper design.
CSS:
CSS is also a markup language we have used this language to design our button and its box and other content. First, we have provided the background color using CSS property. Then we used a div tag for creating a box. Box has a shadow and it is also added using CSS property. If you want to get different types of box shadows then click here. We have divided the box into two sections. Upper box and lower box. The upper portion has provided a radius that’s why it is round in shape.
Below this, we have the heading and then which is added using <h1> and <p> tags. Then a button is added using <button> and style is added using CSS. The button has a round shape and it is created using CSS properties. If you are inspired by this design then follow this tutorial till the end. I will help you to create this design from scratch.
You might like it:
How to create a call to action button CSS?
For the development of the call to action button CSS, we will use three basic steps. In the first step, we will download a code editor. Then we will add HTML code and after that CSS code. In this way, we will build it.
Download code editor
A code editor is the basic need of a programmer for writing code. It helps us to write syntax error-free code. The syntax is already defined inside the code editor for a particular language. We will be starting our project with a sublime text editor.
Html source code
Create a new file inside your sublime text editor and then save it in any folder. During saving the file use .html at the end of the file name because it will convert your simple file into an HTML file. It will be easy for other compilers and browsers to understand the type of file for a better experience.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!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>Call to action button - FantacyDesigns</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="card transition"> <h2 class="transition">FantacyDesigns<br><small>Lorem Ipsum has been the industry's </small></h2> <div class="cta-container transition"><a href="#" class="cta">Call to action</a></div> <div class="card_circle transition"></div> </div> </body> </html> </body> </html> |
CSS source code
Again create a new file and save it in the same folder of your device. While saving the file use .css at the end of the file name. It will convert your file into a CSS file and while connecting it with an HTML file it will implement all the code of CSS in HTML.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic); /*html { background-image: url(http://cdn.backgroundhost.com/backgrounds/subtlepatterns/arches.png); } */ html, body { background-image: linear-gradient(to right top, #f24b4b, #f55351, #f95b57, #fc635e, #ff6a64); font-family:arial; } .transition { transition: .3s cubic-bezier(.3, 0, 0, 1.3) } .card { background-color: #fff; height: 400px; width: 300px; position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; box-shadow: 0px 0px 10px rgba(0,0,0,0.3); border-radius:30px; overflow: hidden; } .card:hover { box-shadow: 0px 30px 30px rgba(0,0,0,0.2); height: 430px; width: 330px; } .card_circle { height: 400px; width: 450px; background-image: linear-gradient(to right top, #f24b4b, #f55351, #f95b57, #fc635e, #ff6a64); position: absolute; border-radius: 50%; margin-left: -75px; margin-top: -270px; } .card:hover .card_circle { border-radius: 0; margin-top: -130px; } h2 { text-align: center; margin-top: 190px; position: absolute; z-index: 9999; font-size: 26px; color: #FF6A64; width: 100%; font-family: 'Noto Sans', serif; } h2 small { font-weight: normal; font-size: 65%; color: rgba(0,0,0,0.5); padding:20px; } .card:hover h2 { margin-top: 100px; color: #fff; } .card:hover h2 small { color: #fff; } .cta-container { text-align: center; margin-top: 290px; position: absolute; z-index: 9999; width: 100%; font-family: 'Noto Sans', serif; } .cta { color: #fff; border: 2px solid #FF6A64; background-color: #FF6A64; padding: 10px 25px; border-radius: 50px; font-size: 17px; text-decoration: none; font-weight: bold; } .cta:hover{ background-color: #F24B4B; } .card:hover .cta-container { margin-top: 320px; } |
Download source code
If you are facing any error while using the above code then download the code file from the below download button. It has both HTML and CSS files in it. So, download it for free.
If you have any problem related to this button then ask your question in the comment section.
Summary:
This call to action button is coming up on clicking. It has a box and then it has a proper shape. Your job is to change the color of this box and button. Then remove the radius from the button and box as well. It will remove the round corners and you will learn a lot from it. Try it
Thanks for reading this article
