Neumorphism Button With Emoji Using Html Css And Javascript

Designing a neumorphic button with an emoji using HTML, CSS, and JavaScript is a creative way to make your web page look cool and interactive. Neumorphism gives elements a soft, 3D-like appearance, making them visually appealing. This article will show you how to create a stylish neumorphic button and include an emoji to express emotions or actions. You can do all of this using HTML, CSS, and JavaScript, and the result will be a button that not only looks good but also adds fun and functionality to your website.

In simple terms, this article will teach you how to make a button that pops off the screen, and you can even put a cute emoji on it to show feelings or do something when clicked. It's like adding a touch of style and playfulness to your web page, all with the magic of web development. So, get ready to make your web buttons stand out!

01. Html
02. CSS
03. Script
04. Output
05. Youtube Video

Read Also:

HTML:

Let's begin with the foundational structure of an HTML document, as depicted below.

<!DOCTYPE html>
<html>
 <head>
   <title>Neumorphism Button With Emoji Using Html Css And Javascript</title>
 </head>
 <body>
	// Content
 </body>
</html>

Now that we have established the basic HTML structure and ensured that all necessary dependencies are included in the HTML document, it is time to proceed with writing the HTML code, which is provided below.

<!DOCTYPE html>
<html>
<head>
  <title>Neumorphism Button With Emoji| Rustcode</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
  <div class="button">
    <span id="emoji">
      🙂
    </span>
  </div>
</div>  

<script src="script.js"></script>
</body>
</html>

he webpage has a title, "Neumorphism Button With Emoji," and links to an external CSS file called "style.css"
Inside the webpage's body, there's a container div with a button that includes an emoji represented by the "🙂" character.
An external JavaScript file, "script.js" is linked at the bottom of the page for interactivity

Read Also:

CSS:

body{
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.container{
  background-color: #e0e5ec;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  user-select: none;
}

.button{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 12rem;
  min-height: 12rem;
  cursor: pointer;
  border-radius: 25%;
  margin: 0 2rem;
  transition: all 0.25s box-shadow ease-in-out;
  box-shadow: -8px -8px 20px 0px #fff9, -6px -6px 6px 0px #fff9,
  8px 8px 20px 0px #0001, 5px 5px 6px 0px #0001, inset 0px 0px 0px 0px #fff9, inset 0px 0px 0px 0px #0001, inset 0px 0px 0px 0px #fff9, inset 0px 0px 0px 0px #0001;
}

.container .button span{
  font-size: 5.5rem;
  opacity: 0.8;
  transition: 0.15s font-size ease-in-out;
}

.container .btn-active{
  box-shadow: 0px 0px 0px 0px #fff9, 0px 0px 0px 0px #fff9,  0px 0px 0px 0px #0001, 0px 0px 0px 0px #0001, 
  inset -8px -8px 20px 0px #fff9, inset -5px -5px 6px 0px #fff9, inset 8px 8px 20px 0px #0003, inset 5px 5px 6px 0px #0001;
}

.container .btn-active span{
  opacity: 0.9;
  font-size: 5rem;
}

The CSS sets up the webpage by hiding the overflow and resetting margins and padding.
The "container" is styled to have a background color and is centered both horizontally and vertically on the page.
The "button" inside the container is styled as a clickable element with a neumorphic design (soft, 3D-like appearance).
It changes its appearance with transitions and box shadows to create a button press effect when clicked.
The size and opacity of the emoji inside the button also change during interaction.

Output:

Read Also:

SCRIPT:

const buttons = document.querySelectorAll(".button");
const emoji = document.getElementById("emoji");

for(const button of buttons){
  button.addEventListener("click", ()=>{
    button.classList.toggle("btn-active");
    emoji.innerHTML === "😉" ? emoji.innerHTML = "🙂" : emoji.innerHTML = "😉";
  });
}

This JavaScript code is designed to add interactivity to a neumorphic button with an emoji.
It selects all elements with the class "button" and the element with the ID "emoji" from the HTML document.
It adds a click event listener to each button.
When a button is clicked, it toggles the class "btn-active" on the button element, changing its appearance.
Additionally, it toggles between two emoji characters, "🙂" and "😉," displayed inside the button when clicked.

Output:

Read Also:

Youtube Video:

We also made a youtube video for "Neumorphism Button With Emoji Using Html Css And Javascript", if you want to watch demo you can click on below video.

Read Also:

Archive