Copy HTML Code 

👇👇👇👇👇👇👇👇 

:

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/636ba3eff1.js" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neumorphism Music Controller Buttons</title>
</head>
<body>
<div class="buttons">
<i class="fas fa-play" title="Play"></i>
<i class="fas fa-pause" title="Pause"></i>
<i class="fas fa-stop" title="Stop"></i>
<i class="fas fa-forward" title="Next"></i>
<i class="fas fa-backward" title="Previous"></i>
</div>
</body>
</html>




Copy CSS File  👇👇👇👇👇👇👇👇 :
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: #ecf0f3;
}
.buttons{
    display: flex;
    height: 200px;
    width: 60vw;
    position: absolute;
    margin: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 45px;
    box-shadow: 8px 8px 8px #cbced1,
                -8px -8px 8px #fff;
}
.buttons i{
    display: flex;
    margin: 30px;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    font-size: 45px;
    text-align: center;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 8px 8px 8px #cbced1,
                -8px -8px 8px #fff;
}
i:hover{
    color: #FF0099;
    transform: translateY(-10px);
}


Output:


Comments

Post a Comment