“This is the 7th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”
preface
Hi, today I’m going to share some CSS styles for buttons. Why suddenly want to write this, this is to say that the recent gold mining out of a small game — seabed mining, open the game page, there are two big buttons at the bottom, the mouse will have a three-dimensional and real sense of interaction, see this I think this is how to achieve, so there is today’s article.
Today to share the button family photo 👇
Implement 💻
Basic style
<! -- HTML structure -->
<body>
<div class="btn-list">
<div class="btn twinkle">start</div>
<div class="btn slide">start</div>
<div class="btn ball">
<span>start</span>
<div class="dot"></div>
</div>
<div class="btn boom">start</div>
<div class="btn circle">start</div>
<div class="btn three-d">start</div>
</div>
</body>
Copy the code/* Button BTN base style */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #bdc3c7;
}
.btn-list {
display: grid;
grid-template-columns: repeat(3.200px);
gap: 50px;
background: #fff;
border-radius: 20px;
padding: 50px;
box-shadow: 0 0 5px 5px rgb(0 0 0 / 8%);
}
.btn {
width: 200px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
cursor: pointer;
user-select: none;
letter-spacing: 1rem;
text-indent: 1rem;
border-radius: 20px;
box-sizing: border-box;
}
Copy the codeScintillation effect
The idea is to hover after modifying background color, font color, add blinking effect.
Blink using: Before pseudo element, skew and translate3D move.
.twinkle {
overflow: hidden;
position: relative;
border: 2px solid #2c3e50;
color: #2c3e50;
transition: background-color .2s;
}
.twinkle::before {
content: "";
position: absolute;
width: 50px;
height: 200%;
background-color: rgba(255.255.255.6);
transform: skew(45deg) translate3d(-200px.0.0);
}
.twinkle:hover {
background-color: #2c3e50;
}
.twinkle:hover::before {
transition: ease-in-out .5s;
transform: skew(45deg) translate3d(300px.0.0);
}
Copy the codeSliding filling
Similar to the progress bar effect, also with :before pseudo-element implementation, change the pseudo-element width can be.
Make sure to change the Z-index, otherwise it will be overwritten.
.slide {
border: 2px solid #2980b9;
color: #2980b9;
position: relative;
overflow: hidden;
z-index: 1;
transition:.5s;
}
.slide::before {
content: "";
position: absolute;
z-index: -1;
width: 0;
height: 100%;
left: 0;
background-color: #2980b9;
transition: ease-in-out .5s;
}
.slide:hover::before {
width: 100%;
}
Copy the codeEdge-shifting spherule
At first glance, it’s interesting: how does the ball move around the border? Let’s take a look at the picture below.
It turns out that instead of just the ball moving, he has a container that moves horizontally at first, then rotates 180 degrees as it reaches the outer frame, so that the ball at the top of the container naturally rotates, as if it were moving around the frame.
But I have found in the process of implementation, and it’s really hard to adjust, it is not hard to find, my balls in the process of spinning, actually has not completely along the border around the button movement, it has something to do with the shape of the container, I tried is round container, tried rectangular, current research hasn’t come out this is a formula for calculation of how everyone interested can look at.
.ball {
border: 2px solid #8e44ad;
color: #8e44ad;
position: relative;
}
.dot {
position: absolute;
left: 0;
top: 0;
width: 60px;
height: 100%;
border-radius: 20px;
background-color: #bdc3c7;
transition: all .3s ease;
display: none;
}
.dot::before {
content: "";
position: absolute;
top: -11px;
width: 10px;
height: 10px;
background-color: #8e44ad;
border-radius: 50%;
border: 4px solid #8e44ad;
box-shadow: 0 0 10px 0 #8e44ad;
}
.ball:hover {
color: #8e44ad;
}
.ball:hover .dot {
animation: move 2s infinite linear;
display: block;
}
@keyframes move {
0% {
transform: translateX(0) rotate(0);
}
30% {
transform: translateX(calc(200px - 60px)) rotate(0);
}
50% {
transform: translateX(calc(200px - 60px)) rotate(180deg);
}
80% {
transform: translateX(0) rotate(180deg);
}
100% {
transform: translateX(0) rotate(360deg); }}Copy the codeA wave effect
Pseudo-element to achieve the border, hover after the display border, gradually enlarge, gradually reduce the width, transparency gradually reduced to 0.
.boom {
background-color: #16a085;
color: #fff;
position: relative;
z-index: 1;
}
.boom::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 2px solid #16a085;
border-radius: 20px;
transform-origin: center;
}
.boom:hover::before {
transform: scale(1.25);
transition: all ease-out .5s;
border: 1px solid #96f3e0;
opacity: 0;
}
Copy the codeEffect of air bubbles
The pseudo-element implements a circle centered and zoomed in, and the button element sets Overflow: Hidden.
.circle {
background-color: #e74c3c;
color: #fff;
position: relative;
z-index: 1;
overflow: hidden;
}
.circle::before {
content: "";
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
width: 1rem;
height: 1rem;
transform: translate3d(-50%, -50%.0) scale(0.0);
border-radius: 50%;
background-color: #c0392b;
transform-origin: center;
transition: ease-in-out .5s;
}
.circle:hover::before {
transform: translate3d(-50%, -50%.0) scale(15.15);
}
Copy the code3 d effect
Box-shadow is used to achieve this stereo effect. After active, the button element is moved down and the vertical shadow is reduced to achieve this effect. I used several layers of text-shadow to deepen the shadow effect of the text.
.three-d {
color: #fff;
background-color: #f1c40f;
text-shadow: -2px 2px 2px rgb(209 132 0),
-2px 2px 2px rgb(209 132 0),
-2px 2px 2px rgb(209 132 0),
-2px 2px 2px rgb(209 132 0),
-2px 2px 2px rgb(209 132 0),
-2px 2px 2px rgb(209 132 0);
box-shadow: 0px 15px 0px 0px #f39c12;
transition: all .5s;
}
.three-d:hover {
background-color: #fcdc5e;
}
.three-d:active {
transform: translate(0.4px);
box-shadow: 0px 1px 0px 0px #f39c12;
}
Copy the codeconclusion
That’s all for this episode, pure entertainment.
Welcome to point out any mistakes!