Learn how to create a visually appealing skeuomorphic LIKE button for your website with this comprehensive tutorial using HTML, CSS, and JavaScript.
Table of Contents
The world of web design is constantly evolving, with new trends and styles emerging all the time. One popular design trend that has been around for a while is skeuomorphic design. Skeuomorphic design is a style of design that mimics the physical appearance of objects in the real world. It is often used to make digital products look more realistic and familiar to users.
In this blog post, we will provide a step-by-step guide for creating a skeuomorphic like button using HTML, CSS, and JavaScript. The post is aimed at intermediate web developers who are looking to improve their front-end development skills. Whether you're a beginner or an experienced developer, this post will provide you with the tools you need to create a visually appealing skeuomorphic like button for your website.
The post will include code snippets and screenshots to make it easier for readers to follow along. We will start by introducing skeuomorphic design and discussing its advantages and disadvantages. Then, we will walk you through the process of setting up the HTML and CSS for the button, designing the button using CSS, adding skeuomorphic details to the button, and creating the button's click functionality with JavaScript.
By the end of this post, you will have a solid understanding of skeuomorphic design and the skills you need to create a realistic like button for your website. So let's get started!
What is skeuomorphic design?
Skeuomorphic design is a popular design trend that mimics the physical appearance of objects in the real world. This design style is often used in digital products such as websites, mobile apps, and user interfaces to make them look more realistic and familiar to users.
One of the advantages of skeuomorphic design is that it can make digital products more intuitive and easier to use. By using design elements that are familiar to users from the real world, such as buttons that look like physical buttons, it can create a more intuitive user experience. Additionally, skeuomorphic design can also make digital products more aesthetically pleasing, which can lead to increased user engagement and satisfaction.
However, skeuomorphic design also has some disadvantages. One of the main disadvantages is that it can make digital products feel dated or old-fashioned. As design trends change over time, skeuomorphic design can start to look out of place and may need to be updated. Additionally, skeuomorphic design can also make digital products more difficult to navigate if it is not executed properly. Overuse of skeuomorphic design elements can create clutter and confusion, which can lead to a negative user experience.
Overall, skeuomorphic design can be a powerful tool in web design when used appropriately. It can make digital products more intuitive and aesthetically pleasing, but it should be used in moderation and with careful consideration of its potential drawbacks.
Let's start making an amazing skeuomorphic LIKE button using HTML, CSS and JavaScript step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Created by: LukyVJ
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our skeuomorphic button.
The <!DOCTYPE html> tag at the beginning of the code specifies the document type as HTML. The <html> tag encloses the entire document and the lang="en" attribute indicates that the language of the document is English.
The <head> section of the code includes the title of the document, which appears in the browser tab, as well as character encoding and viewport meta tags. The <link> tag references an external CSS file called "styles.css" which is used to style the button.
The <body> section of the code includes a <button> element, which is the actual "LIKE" button. The class="inactive" attribute sets the initial state of the button as inactive. The button has three child elements: <div class="icon"></div>, <div class="text">, and <div class="numbers">. The first child element defines the icon or symbol for the button, which in this case is left blank. The second child element defines the text label for the button, which includes the word "Like" and a superscript "d" which suggests that the user has already liked something. The third child element includes two <span> tags which display the number of likes and dislikes respectively.
Finally, the <script> tag at the end of the code references an external JavaScript file called "script.js" which can be used to add functionality to the button.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our skeuomorphic button using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the skeuomorphic button is in place, the next step is to add styling to the skeuomorphic button using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our skeuomorphic button.
The first part of the code block defines a custom font called "Mona Sans" using the @font-face rule. It specifies the source of the font file and its weight range.
The second part of the code block defines custom CSS properties using the @layer properties rule. It defines six custom properties that accept numbers as input and can inherit from their parent elements. These custom properties are used later in the code to control the animations and transformations of various elements.
The :root selector is used to define global CSS variables, which can be accessed and used throughout the entire document. The code block defines several color variables and animation variables.
The body selector is used to apply various styles to the entire body of the HTML document, such as setting the background color, font family, and centering the content.
The button selector is used to style a specific button element in the HTML document. It applies various styles to the button, such as setting the font weight, color, background image, border, border radius, and box shadow. The button also includes various child elements such as icons and text, which are also styled using CSS. Finally, the button includes a number of transformations and animations which are controlled using the custom properties defined earlier in the code block.
This will give our skeuomorphic button an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@font-face {
font-family: "Mona Sans";
src: url("https://assets.codepen.io/64/Mona-Sans.woff2") format("woff2 supports variations"), url("https://assets.codepen.io/64/Mona-Sans.woff2") format("woff2-variations");
font-weight: 100 1000;
}
@layer properties {
@property --nb-1-tsy {
syntax: "";
inherits: true;
initial-value: 0;
}
@property --nb-2-tsy {
syntax: "";
inherits: true;
initial-value: 0;
}
@property --nb-1-op {
syntax: "";
inherits: true;
initial-value: 0;
}
@property --nb-2-op {
syntax: "";
inherits: true;
initial-value: 0;
}
@property --ic-op {
syntax: "";
inherits: true;
initial-value: 0;
}
@property --btn-scale {
syntax: "";
inherits: true;
initial-value: 0;
}
@property --ic-ts-x {
syntax: "";
inherits: true;
initial-value: 0;
}
}
* {
-webkit-font-smoothing: antialiased;
}
:root {
--ic-thumb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-thumbs-up'%3E%3Cpath d='M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E");
/* COLORS */
--eerie-black: hsla(0, 0%, 12%, 1);
--night: hsla(0, 0%, 9%, 1);
--black: hsla(0, 0%, 0%, 1);
--battleship-gray: hsla(0, 0%, 55%, 0.8);
/* ANIMATIONS VARS */
--nb-1-tsy: 0;
--nb-2-tsy: 100;
--nb-1-op: 1;
--nb-2-op: 0;
--ic-op: 0.5;
--ic-ts-x: 0;
--btn-scale: 1;
}
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body {
background: #0f0f0f;
display: flex;
align-items: center;
justify-content: center;
font-family: "Mona Sans", sans-serif;
}
button {
font-weight: bold;
color: white;
padding: 1em;
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient(to bottom, var(--eerie-black), var(--night));
border: none;
border-radius: 12px;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12), 0 2px 6px black;
cursor: pointer;
transform: scale(var(--btn-scale));
position: relative;
overflow: hidden;
will-change: transform;
transition: --nb-1-tsy 0.3s ease, --nb-2-tsy 0.3s ease, --nb-1-op 0.15s ease, --nb-2-op 0.15s ease, --ic-op 0.15s ease, --ic-ts-x 0.15s ease;
}
button > div {
height: 1.6rem;
min-width: 1.6rem;
display: flex;
align-items: center;
}
button .icon {
width: 1.6em;
height: 1.6em;
background: var(--ic-thumb) no-repeat center center/70%;
opacity: var(--ic-op);
transform: translateX(calc(var(--ic-ts-x)*-1px));
}
button .text {
font-size: 1.3em;
display: flex;
justify-content: center;
align-items: center;
margin-left: 1rem;
transform: translateX(calc(calc(var(--ic-ts-x)/3)*-1px));
}
button .text > span {
display: none;
}
button .numbers {
flex-direction: column;
position: relative;
margin-left: 2em;
font-variant-numeric: tabular-nums;
font-size: 1.3em;
}
button .numbers:before {
content: "";
display: block;
width: 1px;
height: 140%;
background: rgba(255, 255, 255, 0.2);
position: absolute;
left: -50%;
top: -16%;
}
button .numbers > span {
display: inline-flex;
align-items: center;
height: 100%;
position: absolute;
}
button .numbers > span:nth-child(1) {
transform: translateY(calc(var(--nb-1-tsy) * -1%));
color: rgba(255, 255, 255, 0.5);
opacity: var(--nb-1-op);
}
button .numbers > span:nth-child(2) {
transform: translateY(calc(var(--nb-2-tsy) * 1%));
opacity: var(--nb-2-op);
}
button:hover {
--ic-op: 1;
}
button.active {
--nb-1-tsy: 100;
--nb-2-tsy: 0;
--nb-1-op: 0;
--nb-2-op: 1;
--ic-op: 1;
--ic-ts-x: 40;
}
button.active .text > span {
display: inline-block;
}
.btn-bounce {
animation-name: bounce;
animation-duration: 0.5s;
animation-timing-function: ease;
}
@keyframes bounce {
0% {
--btn-scale: 1;
}
25% {
--btn-scale: 0.98;
}
50% {
--btn-scale: 1.02;
}
100% {
--btn-scale: 1;
}
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript.
The first line of the code assigns the button element to a variable called btn using the querySelector method of the document object. This method is used to find an element in the web page that matches a specific selector. In this case, the selector is button, which means that the first button element in the page will be selected.
The next line adds an event listener to the button element using the addEventListener method. This method takes two arguments: the first argument is the name of the event to listen for (in this case, "click"), and the second argument is a function that will be executed when the event is triggered. The function is defined using an arrow function syntax ("() => {...}"), which is a shorthand way of defining a function in JavaScript.
Inside the event listener function, there are three lines of code. The first line toggles the active class on the button element using the classList.toggle method. This method adds the class if it doesn't exist on the element, and removes it if it does exist. The active class is presumably used to style the button in some way.
The second line toggles the btn-bounce class on the button element. This class is also presumably used to animate the button in some way.
The third line sets a timeout using the setTimeout method. This method takes two arguments: a function to execute, and a delay time in milliseconds. In this case, the function that is executed after the delay is another arrow function that removes the btn-bounce class from the button element.
Overall, this code snippet is used to add some interactivity and animation to a button element in a web page. When the user clicks on the button, the active and btn-bounce classes are toggled on the element, causing it to animate in some way. After a short delay, the btn-bounce class is removed from the element, stopping the animation.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
const btn = document.querySelector("button");
btn.addEventListener("click", () => {
btn.classList.toggle("active");
btn.classList.toggle("btn-bounce");
setTimeout(() => {
btn.classList.remove("btn-bounce");
},500)
});Final Output:
Conclusion:
In conclusion, skeuomorphic design is a popular trend in web design that can make digital products more intuitive and aesthetically pleasing. By mimicking the physical appearance of objects in the real world, designers can create a more familiar user experience and increase engagement and satisfaction.
However, as with any design trend, there are both advantages and disadvantages to using skeuomorphic design. It can make digital products feel dated if not executed properly, and it can also create clutter and confusion if overused.
In this blog post, we have provided a step-by-step guide for creating a skeuomorphic like button using HTML, CSS, and JavaScript. By following these steps, you can create a visually appealing and realistic button for your website while also understanding the advantages and potential drawbacks of skeuomorphic design.
Overall, skeuomorphic design can be a powerful tool in web design when used appropriately. By understanding its potential benefits and drawbacks, you can create digital products that are both aesthetically pleasing and easy to use. We hope this blog post has been helpful in improving your front-end development skills and we encourage you to experiment with skeuomorphic design in your future projects.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
