Neomorphism Button with Hover Effect
Written by 21 December 2022
Neumorphism designed button with an on hover effect.
Code Snippet:
<!-- this script is provided by http://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neomorphism Button with Hover Effect</title>
<!-- font awesome library include 4.7 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- font library -->
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<!-- css styles -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
/* default light theme */
:root, html{
margin: 0;
padding: 0;
font-family: "Inter", arial, monospace;
--main-color: #E6E7EE;
--secondary-color: #d1d9e6;
--third-color: #b8b9be;
}
/* dark-mode theme */
:root[data-theme="dark-mode"]{
}
/* main styles */
html, body{
height: 200%;
margin: 0;
padding: 0;
}
body{
position: relative;
display: flex;
justify-content: center;
align-items: start;
background-color: var(--main-color);
}
*{
box-sizing: border-box;
font-family: "Inter", arial, monospace;
font-size: 2rem;
color: darkgrey;
transition: all 0.5s ease-in-out;
}
main{
display: flex;
justify-content: center;
align-items: start;
}
.button{
margin: 2rem;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--main-color);
border: 1px solid var(--secondary-color);
border-radius: 5px;
font-size: 0.75rem;
padding: 0.25rem 1rem;
}
.neumorphic-shadows {
-webkit-box-shadow: 3px 3px 6px var(--third-color), -3px -3px 6px #ffffff;
box-shadow: 3px 3px 6px var(--third-color), -3px -3px 6px #ffffff;
}
.neumorphic-shadows:hover {
cursor: pointer;
-webkit-box-shadow: inset 2px 2px 5px var(--third-color), inset -3px -3px 7px #ffffff;
box-shadow: inset 2px 2px 5px var(--third-color), inset -3px -3px 7px #ffffff;
}
</style>
</head>
<body>
<main>
<button class="button neumorphic-shadows">Kerixa</button>
</main>
<script>
/*
Tutorial Description
Neumorphism designed button with an on hover effect.
*/
</script>
</body>
</html><a target='_blank' href='http://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Online Users:
12
Recent Members:
Jenisha, Mr Joseph Charles, Nikhil 999+, bishalthakur
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!