Neomorphism Button with Hover Effect

Written by @phuang 21 December 2022

Neumorphism designed button with an on hover effect.

Code Snippet:

                                                
                                                <!-- this script is provided by 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='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>                                                
                                            

Example:


About @phuang

Help desk analyst transitioning to a full-stack developer role. Hoping to learn and collaborate with everyone. Happy coding!

P

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Jenisha, Mr Joseph Charles, Nikhil 999+, bishalthakur
advertisement 2