Buttons are one of the most, if not the most important, component of a website. That is where you would place your Call-To-Action (CTA). Therefore, it should look inviting to encourage a higher conversion rate. Here are some examples:
How to Create HTML Buttons
To create the buttons as above, you can employ a basic structure like so:
<html>
<head>
<style>
<!--Place CSS Here-->
</style>
</head>
<body>
<!--Place HTML Here-->
</body>
</html>
The CSS
There is an assortment of CSS libraries which has various ready-made styling for HTML buttons. Some renown ones are:
However, for this short tutorial, let’s create HTML buttons from scratch:
Root
You can change the colours of your buttons here:
:root{
--main: #663399;
--hover: #301934;
--click: #351653;
--effect: #3516537e;
--font: #fff;
}
Main Styling for bttn class
.bttn {
display: block;
font-weight: 500;
line-height: 2;
border: 3px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
border-radius: 0.5rem;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background-color: transparent;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
width: 50%;
margin-left:auto;
margin-right:auto;
}
@media (prefers-reduced-motion: reduce) {
.bttn {
transition: none;
}
}
.bttn-check:focus + .bttn, .bttn:focus {
outline: 0;
}
.bttn:disabled, .bttn.disabled, fieldset:disabled .bttn {
pointer-events: none;
opacity: 0.65;
}
Styling Primary Button (bttn-primary class)
.bttn-primary {
color: var(--font);
background-color: var(--main);
border-color: var(--main);
}
.bttn-primary:hover {
color: var(--font);
background-color: var(--hover);
border-color: var(--hover);
}
.bttn-check:focus + .bttn-primary, .bttn-primary:focus {
color: var(--font);
background-color: var(--click);
border-color: var(--click);
box-shadow: 0 0 0 0.25rem var(--Click);
}
.bttn-check:checked + .bttn-primary, .bttn-check:active + .bttn-primary, .bttn-primary:active, .bttn-primary.active, .show > .bttn-primary.dropdown-toggle {
color: var(--font);
background-color: var(--click);
border-color: var(--click);
}
.bttn-check:checked + .bttn-primary:focus, .bttn-check:active + .bttn-primary:focus, .bttn-primary:active:focus, .bttn-primary.active:focus, .show > .bttn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0.25em 0.25rem var(--effect);
}
.bttn-primary:disabled, .bttn-primary.disabled {
color: var(--font);
background-color: var(--main);
border-color: var(--main);
}
Styling for Outline Primary Button (bttn-outline-primary class)
.bttn-outline-primary {
color: var(--main);
border-color: var(--main);
}
.bttn-outline-primary:hover {
color: var(--font);
background-color: var(--main);
border-color: var(--main);
}
.bttn-check:focus + .bttn-outline-primary, .bttn-outline-primary:focus {
box-shadow: 0 0 0.25em 0.25rem var(--effect);
}
.bttn-check:checked + .bttn-outline-primary, .bttn-check:active + .bttn-outline-primary, .bttn-outline-primary:active, .bttn-outline-primary.active, .bttn-outline-primary.dropdown-toggle.show {
color: var(--font);
background-color: var(--main);
border-color: var(--main);
}
.bttn-check:checked + .bttn-outline-primary:focus, .bttn-check:active + .bttn-outline-primary:focus, .bttn-outline-primary:active:focus, .bttn-outline-primary.active:focus, .bttn-outline-primary.dropdown-toggle.show:focus {
box-shadow: 0 0 0.25em 0.25rem var(--effect);
}
.bttn-outline-primary:disabled, .bttn-outline-primary.disabled {
color: var(--main);
background-color: transparent;
}
The HTML
Primary Button
The Primary button is using two CSS classes: bttn and bttn-primary
<button
type="button"
class="bttn bttn-primary">
Primary Button
</button>
or you can type it into a single line like so:
<button type="button" class="bttn bttn-primary">Primary Button</button>
Coupled with the Primary CSS from above, the result should be like so:
Outline Primary Button
The Outline Primary button is using two CSS classes as well: bttn and bttn-outline-primary
<button
type="button"
class="bttn bttn-outline-primary">
Outline Primary Button
</button>
or you can type it into a single line like so:
<button type="button" class="bttn bttn-outline-primary">Outline Primary Button</button>
Coupled with the Outline Primary CSS from above, the result should be like so:
Effective Call-To-Action (CTA)
Once you have designed your buttons based on your creativity, effective CTA is crucial to get these buttons more inviting for website visitors. All you have to do is replace the ‘Primary Button’ or ‘Outline Primary Button’ with any of your chosen CTA. Here are some examples of CTAs:
- Find out
- Get started
- Give it a try
- Join
- Join us
- Join for free
- Learn more
- Sign up
- Sign up for free
- Subscribe
- Try for free
Conclusion
Buttons are a user-friendly CTA that connects you with your potential clients. A well-designed button may not occupy the majority of your website. But undoubtedly, that button is used to convert potential visitors to valued clients. How are you designing your website buttons? Share some of your interesting thoughts on the matter in the comment section.