<section class="light">
<div class="circle">
<p>Submit</p>
</div>
<div class="circle long">
<p>Submit</p>
</div>
</section>
<section class="dark">
<div class="circle_black">
<p>Submit</p>
</div>
<div class="circle_black long">
<p>Submit</p>
</div>
</section>
<!--
Inspiration : https://codepen.io/lukemeyrick/pen/OJPdGdO
-->
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
font-size: 20px;
}
body {
display: flex;
width: 100vw;
height: 100vh;
overflow: hidden;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
section.light,
section.dark {
display: flex;
width: 50vw;
height: 100vh;
align-items: center;
justify-content: space-around;
}
section.light {
background-color: #e0e5ec;
}
section.dark {
background-color: #131419;
}
div.circle,
div.circle_black {
position: relative;
display: flex;
width: 150px;
height: 150px;
border-radius: 150px;
align-items: center;
justify-content: center;
}
div.circle:before,
div.circle_black:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
width: 150px;
height: 150px;
content: " ";
cursor: pointer;
transition: 0.3s ease-out;
border-radius: 150px;
filter: blur(7px);
}
div.circle.long,
div.circle_black.long {
width: 250px;
height: 100px;
}
div.circle.long:before,
div.circle_black.long:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 250px;
height: 100px;
}
div.circle:before {
box-shadow: 8px 8px 20px #a9a8b7, -8px -8px 20px #fff;
}
div.circle_black:before {
box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.5),
-8px -8px 20px rgba(255, 255, 255, 0.2);
}
div.circle:hover:before {
box-shadow: 8px 8px 20px #a9a8b7, -8px -8px 20px #fff,
inset -8px -8px 20px #fff, inset 8px 8px 20px #a9a8b7;
}
div.circle_black:hover:before {
box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.5),
-8px -8px 20px rgba(255, 255, 255, 0.2), inset 8px 8px 20px rgba(0, 0, 0, 1),
inset -8px -8px 20px rgba(255, 255, 255, 0.2);
}
div.circle:hover:before,
div.circle_black:hover:before {
transition: 0.3s ease-in;
transform: scale(1.05);
}
div.circle p,
div.circle_black p {
position: relative;
z-index: 5;
user-select: none;
cursor: pointer;
}
div.circle_black {
color: white;
}
@media (max-width: 700px) {
body {
height: auto;
flex-direction: column;
}
section.light,
section.dark {
width: 100vw;
height: 100vh;
}
}
/*
CSS FOR JUST ONE BUTTON
section.light {
background-color: #e0e5ec;
}
div.circle {
position: relative;
display: flex;
width: 150px;
height: 150px;
border-radius: 150px;
align-items: center;
justify-content: center;
}
div.circle:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
width: 150px;
height: 150px;
content: " ";
cursor: pointer;
transition: 0.75s ease-out;
border-radius: 150px;
filter: blur(7px);
box-shadow: 8px 8px 20px #a9a8b7, -8px -8px 20px #fff;
}
div.circle_black:hover:before {
transition: 0.75s ease-in;
transform: scale(1.1);
}
/*
Welcome to my pen.
This is a little pen about Neumorphism. I got this idea after seeing this pen :
https://codepen.io/lukemeyrick/pen/OJPdGdO
Why not make this button with
the less CSS lines i can.
I also did a Dark Version, because i usually prefer Dark themes.
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.