Neumorphism buttons


Go to main Page

Neumorphism buttons in HTML & CSS

neumorphism buttons neumorphism effect

CSS Neumorphism Button Hover Effects||Neuromorphism effect in HTML&CSS tutorial
Neuromorphism effect buttons Code

<!DOCTYPE html>
<html>
<head>
    <title>Effect</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<style >
    body{
        font-size: 18px;
        background:#D0D0D0;
        align-items: center;
        justify-content: center;
        transition: 0.5s;
    }
.center{
    display: block;
    justify-content: space-around;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: 10px;
    transform: translate(-50%,-50%);
    width: 100px;
    height: 100px;
    background:#D0D0D0;
    align-items: center;
    border-radius: 20px;
    transition: transform box-shadow;
    box-shadow: -4px -4px 5px #ffffff,
    5px 5px 5px #929292;
}
.top{
    display: block;
    justify-content: space-around;
    position: absolute;
    top: 25%;
    left: 50%;
    margin-right: 10px;
    transform: translate(-50%,-50%);
    width: 100px;
    height: 100px;
    background:#D0D0D0;
    align-items: center;
    border-radius: 20px;
    transition: transform box-shadow;
    box-shadow: -4px -4px 5px #ffffff,
    5px 5px 5px #929292;
}
.bottom{
    display: block;
    justify-content: space-around;
    position: absolute;
    bottom: 10%;
    left: 50%;
    margin-right: 10px;
    transform: translate(-50%,-50%);
    width: 100px;
    height: 100px;
    background:#D0D0D0;
    align-items: center;
    border-radius: 20px;
    transition: transform box-shadow;
    box-shadow: -4px -4px 5px #ffffff,
    5px 5px 5px #929292;
}
.bottom:hover{
    box-shadow: inset -4px -4px 5px #FFFFFF,
    inset 5px 5px 5px #929292;
}
.top:hover{
    box-shadow: inset -4px -4px 5px #FFFFFF,
    inset 5px 5px 5px #929292;
}

.center:hover{
    box-shadow: inset -4px -4px 5px #FFFFFF,
    inset 5px 5px 5px #929292;
}
#whatsapp{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 35px;
    color: #3CF15D ;

}
#facebook{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 35px;
    color: #138EC8  ;

}
#linkedin{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 35px;
    color: #F90026  ;

}


</style>
</head>
<body>
    <div class="top">
        <i id="whatsapp" class="fab fa-instagram"> </i>
    </div>
    <div class="center">
        <i id="facebook" class="fab fa-youtube"> </i>
    </div>
    <div class="bottom">
        <i id="linkedin" class="fab fa-linkedin"> </i>
    </div>

</body>
</html>