Hey there! 😃 In today’s technology-obsessed world, it’s absolutely crucial to master the art of creating an amazing circular clickable button. A well-crafted button not only enhances the presentation but also elevates the user experience. Maximizing user attention is vital, and buttons are, most of the time, the key to achieving this goal. By utilizing the right tools and techniques, we can create a visually stunning and functionally efficient button that not only looks great but also delivers an unforgettable user experience. 🆙
Let’s collaborate to create a standout button that supports user-friendliness.
HTML Basic Structure
To start building our button, we need to organize our HTML code snippet. The first step is to create a parent element that will act as the base of our button. We give this element the class name .button-base. Next, we need to add a child element within this parent element to serve as the clickable part of the button. We give this child element the class name .clicable-part. It’s important to nest these two elements within a button HTML element as it’s more semantic, better for accessibility, and behaves correctly in forms and interactive contexts by default.
Additionally, we need to create the shadow effect for our button, so we add one more HTML element with the class name .button-shadow.
<button>
<div class="button-base">
<div class="clicable-part"></div>
</div>
</button>
<div class="button-shadow"></div>CSS foundation
We move forward with CSS and make our button fresh and stylish! For this post, I am writing CSS using Sass syntax. If you would like to convert it to vanilla CSS and don’t already know how, I’d suggest you use an online Sass — CSS converter.
Prepare the body for the clickable button
Firstly, we apply a color (#f5f5f5 – dark gray) to the body by setting the background-color. Additionally, we want to center our button. For that reason, we are using the flex method.
body {
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
}Create the base of the clickable button
To create the base of our button, we start by making a square with a width and height of 200 pixels. Then, we make it rounded by adding a border-radius of 50%. We use a pale white color (#f9f9f9) for the button’s background-color. To give it a more stylish look, we add some shadows using the box-shadow property.
Finally, we add the flex method to prepare the space to position the clickable part of the button in the center of the base.
📍 As seen in the code snippet below, we need to include border: none and background-color: transparent properties in the button element to ensure it will display only the styles we define. These properties remove the browser’s default styles that typically come with. As a result, it provides us with a clean starting point, so the button appears exactly as we’ve styled it, with no unexpected borders or colors.
button {
border: none;
background-color: transparent;
.button-base {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #f9f9f9;
box-shadow: inset 0 6px 8px #eae8e8, /* top inset shadow */
inset 0 -2px 15px #ccc7c7, /* bottom inset shadow */
0 3px 3px #d6d1d1; /* bottom shadow */
display: flex;
align-items: center;
justify-content: center;
}
}In the image below, you can see the base of the button we just created.
Create the clickable part of the button
To create the clickable part of our button, we first set the height and width to 80%. Then, we apply a border-radius: inherit to make it appear rounded and follow the shape of the base. For the background of the button, we use a linear-gradient that adds depth as it gives a bright orange color at the top that gradually becomes darker as it goes down. To add a more stylish look, we include shadows using the box-shadow property.
.clicable-part {
width: 80%;
height: 80%;
border-radius: inherit;
border: 1px solid white;
background: linear-gradient(
to bottom,
#f7eb13,
#fd741b
);
box-shadow: inset 0px 3px 6px #ffa500, /* top inset shadow */
0px 1px 3px #d05a05, /* bottom inset shadow */
0 6px 6px #bcb8b8; /* bottom shadow */
}The following image shows the clickable part we just added on the top of the base.
Add content at the top of the clickable part
To add content at the top of the clickable part of a button, we can use a :before pseudoelement. Inside the pseudoelement, we can insert the desired symbol or text using the content property. For instance, in our case, a question mark emoticon (?) has been used, but you can use any symbol or text you prefer. It’s important to note that the flex method in the .clickable-part class is essential, as it centers the mark correctly.
.clicable-part {
...
display: flex;
align-items: center;
justify-content: center;
&:before {
position: absolute;
content: "❔";
}
}The image below displays the content we added on the top of the clickable part of the button.
Add the hover effect on the top of the clickable button
To add a hover effect, we set the :hover CSS property. For the cursor, I prefer using the value pointer (👆), but feel free to choose any other style from the plethora of options available here. Finally, I apply the filter: brightness and increase it to 110%. This makes our button appear brighter whenever the mouse hovers over it. ✨
.clicable-part {
...
&:before {
..
}
&:hover {
cursor: pointer;
filter: brightness(110%);
}
}The gif below demonstrates how the hover effect (👆) appears.
Activate the clickable part of the button
To make your button fully functional, you need to activate its clickable part. We can achieve this by adding the :active property. Next, we give it a background with a linear-gradient that creates a sense of depth by providing a bright magenta color at the top that gradually becomes darker as it goes down. To make it more visually appealing, we include shadows using the box-shadow property.
.clicable-part {
...
&:before {
..
}
&:hover {
...
}
&:active {
background: linear-gradient(
to bottom,
#f767f7,
#df0361
);
box-shadow: inset 0px 3px 6px #df0361, /* top inset shadow */
0 3px 5px #bcb8b8; /* bottom shadow */
}
}The following gif displays the activated clickable area.
Update the button’s content when it is activated
To enhance the user experience, we can dynamically update the content displayed on the button when it’s clicked. This may be accomplished by adding a :before pseudoelement and inserting the desired content into the content property. In our case, we will display a white heart (🤍) when the button is clicked.
.clicable-part {
...
&:before {
..
}
&:hover {
...
}
&:active {
...
&:before {
position: absolute;
content: "🤍";
}
}
}With just a single click, this button comes to life and reveals its beautiful new content in the following gif (🤍) – it’s an absolute must-see!! 😎
Add the shadow effect to the clickable button
The last thing we have to do is add the shadow effect. We create a rectangle with 140 pixels width and 15 pixels height. Next, we give it a rounded shape by setting the border-radius property to 50%. To create a background that looks like it becomes lighter as it goes toward outer space, we use the radial-gradient technique and make the center darker. To make the whole thing look smoother, we add shadows with the box-shadow property.
Finally, we utilize the position: absolute combined with the top, left, and transform properties to move it below the button and center it.
.shadow {
width: 140px;
height: 15px;
border-radius: 50%;
background: radial-gradient(#a7aaaa, #b2b7b7 10%, #eaeded);
box-shadow: -5px 0px 10px 5px #eaeded, /* shadow right side */
5px 0px 10px 5px #eaeded, /* shadow left side */
inset -5px 0px 5px #eaeded, /* inset shadow right side */
inset 5px 0px 5px #eaeded; /* inset shadow left side */
position: absolute;
top: 520px;
left: 50%;
transform: translate(-50%);
}The button’s captivating shadow effect is truly impressive and adds to the overall appeal. Hope you find it enjoyable and engaging. Thank you for your attention. 🥳
Complete code solution
Below is the full code referenced in this blog post. Feel free to copy and use it in your own projects. If you have any questions or encounter any issues, don’t hesitate to reach out for assistance. You can easily copy the desired code snippet by clicking on the copy icon, located in the top-right corner of each snippet.
<button>
<div class="button-base">
<div class="clicable-part"></div>
</div>
</button>
<div class="button-shadow"></div>@mixin flex-all-center {
display: flex;
align-items: center;
justify-content: center;
}
$body-color: #f5f5f5;
$button-base-color: #f9f9f9;
$button-base-inset-top-shadow: #eae8e8;
$button-base-inset-bottom-shadow: #ccc7c7;
$button-base-dark-shadow: #d6d1d1;
$button-color: linear-gradient(to bottom, #f7eb13, #fd741b);
$button-inset-top-shadow: #ffa500;
$button-inset-bottom-shadow: #d05a05;
$button-dark-shadow: #bcb8b8;
$button-active-color: linear-gradient(to bottom, #f767f7, #df0361);
$button-active-inset-shadow: #df0361;
$button-shadow: #eaeded;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100vh;
}
body {
background: $body-color;
@include flex-all-center;
min-width: 300px;
}
button {
border: none;
background-color: transparent;
.button-base {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: $button-base-color;
box-shadow: inset 0 6px 8px $button-base-inset-top-shadow, /* top inset shadow */
inset 0 -2px 15px $button-base-inset-bottom-shadow, /* bottom inset shadow */
0 3px 3px $button-base-dark-shadow; /* bottom shadow */
@include flex-all-center;
.clicable-part {
width: 80%;
height: 80%;
font-size: 50px;
border-radius: inherit;
border: 1px solid white;
background: $button-color;
box-shadow: inset 0px 3px 6px $button-inset-top-shadow, /* top inset shadow */
0px 1px 3px $button-inset-bottom-shadow, /* bottom shadow */
0 6px 6px $button-dark-shadow; /* bottom shadow */
@include flex-all-center;
&:before {
position: absolute;
content: "❔";
}
&:hover {
cursor: pointer;
filter: brightness(110%);
}
&:active {
background: $button-active-color;
box-shadow: inset 0px 3px 6px $button-active-inset-shadow, /* top inset shadow */
0 3px 5px $button-dark-shadow; /* bottom shadow */
&:before {
position: absolute;
content: "🤍";
}
}
} /* end of clicable-part */
} /* end of button-base */
} /* end of button */
.button-shadow {
width: 140px;
height: 15px;
border-radius: 50%;
background: radial-gradient(#a7aaaa, #b2b7b7 10%, #eaeded);
box-shadow: -5px 0px 10px 5px $button-shadow, /* shadow right side */
5px 0px 10px 5px $button-shadow, /* shadow left side */
inset -5px 0px 5px $button-shadow, /* inset shadow right side */
inset 5px 0px 5px $button-shadow; /* inset shadow left side */
position: absolute;
top: 520px;
left: 50%;
transform: translate(-50%);
} /* end of shadow */
