Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a button animation. To create all effect we will use HTML and CSS. We do not make use of any images, icons or external libraries and plugins to create this animation and effect.
As I have mentioned in my tutorials before, this kind of design hardly finds application in real-world projects. However, they are a fun way to learn and explore new CSS properties.
using CSS transitions and keyframes, animated buttons respond to user actions with smooth effects that usability.
Project Folder Structure:
Before we start coding let us take a look at the project folder structure. We create a project folder called – ‘Button Animations’. Inside this folder, we have two files. These files are – index.html and style.css. The first file is the HTML document while the second one is the stylesheet.
HTML:
We begin with the HTML code. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Button Animation | Codehemu</title>
<link href="https://www.codehemu.com/favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
<body>
<button></button>
</body>
</html>
StyleSheet (CSS):
Next, we style the elements created by HTML to give them text effect and animation using CSS. Now copy the code provided to you below and paste it into your stylesheet. Below is the code for many style sheets, you can copy and use the style you want to see.
Glass Button
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100vh;
overflow: hidden;
background: #fdf9fd;
background: radial-gradient(ellipse at center, rgba(68, 17, 0, 0.5) 0%, rgba(0, 0, 0, 1) 100%);
}
button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px 40px;
text-align: center;
font-size: 100px;
color: white;
border-radius: 50px;
background: linear-gradient(170deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 20%, rgba(255, 255, 255, 0.2) 55%, rgba(0, 0, 0, 0.0) 56%, rgba(0, 0, 0, 0.0) 100%);
border-color: rgba(255, 255, 255, 0.2);
border-image: none;
border-style: groove;
border-width: 3px;
border-bottom-width: 2px;
box-shadow: 0 -4px 8px -1px rgba(255, 255, 255, 0.4) inset;
}Neon Button
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100vh;
overflow: hidden;
background: #191919;
}
button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px 40px;
text-align: center;
font-size: 100px;
background: transparent;
color: #e783f3e6;
text-shadow: 0 0 7px #e783f3e6;
border: 3px solid #e783f3e6;
border-radius: 5px;
text-transform: uppercase;
font-weight: bold;
box-shadow: 0 0 7px 4px #9f57a1b3, 0 0 7px 4px #9f57a1b3 inset;
animation: flicker 2s linear infinite;
}
@keyframes flicker {
0% {
box-shadow: 0 0 7px 4px #9f57a1b3, 0 0 7px 4px #9f57a1b3 inset;
}
45% {
box-shadow: 0 0 20px 13px #9f57a1b3, 0 0 7px 4px #9f57a1b3 inset;
text-shadow: 0 0 20px #e783f3e6;
}
60% {
box-shadow: -5px 5px 7px 9px #9f57a1b3, 0 0 7px 4px #9f57a1b3 inset;
}
}
Glow Button
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100vh;
overflow: hidden;
background: #ff5858;
background: linear-gradient(to right, #f857a6, #ff5858);
}
button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 40px 40px;
text-align: center;
font-size: 100px;
background: white;
border-radius: 100px;
border: none;
color: rgb(248, 87, 166);
}
/* Pseudo-element for a subtle outer glow/atmosphere effect */
button:before {
content: '';
position: absolute;
left: -60px;
top: -60px;
right: -60px;
bottom: -60px;
border-radius: 100px;
background-image: linear-gradient(175deg, rgba(254, 254, 254, 0.2) 0%, rgba(254, 254, 254, 0.1) 100%);
z-index: 9;
}
/* Another pseudo-element for a stronger, closer outer glow/atmosphere effect */
button:after {
content: '';
position: absolute;
left: -30px;
top: -30px;
right: -30px;
bottom: -30px;
border-radius: 100px;
background-image: linear-gradient(175deg, rgba(254, 254, 254, 0.4) 0%, rgba(256, 256, 256, 0.1) 100%);
z-index: 9;
}
Spacy Button
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100vh;
overflow: hidden;
background: #111;
}
button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 40px 20px;
color: #FFB902;
text-transform: uppercase;
letter-spacing: 0.125em;
line-height: 1;
text-align: center;
font-size: 100px;
background: none;
border: none;
cursor: pointer;
}
button:before,
button:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 1px;
}
button:before {
top: 0;
left: 0;
box-shadow: inset 1px 1px 0 0 #FFB902;
}
button:after {
right: 0;
bottom: 0;
box-shadow: inset -1px -1px 0 0 #FFB902;
}
button:active {
color: #FFB902;
}
button:focus {
color: #ffc735;
outline: none;
}
button:hover {
&:before {
animation: hoverShadowBefore 1s forwards;
}
&:after {
animation: hoverShadowAfter 1s forwards;
}
}
@keyframes hoverShadowBefore {
0% {
width: 100%;
height: 1px;
top: 0;
left: 0;
}
33% {
width: 1px;
height: 100%;
top: 0;
left: 0;
}
66% {
width: 1px;
height: 1px;
top: calc(100% - 1px);
left: 0;
}
100% {
width: 100%;
height: 1px;
top: calc(100% - 1px);
left: 0;
}
}
@keyframes hoverShadowAfter {
0% {
width: 100%;
height: 1px;
}
33% {
width: 1px;
height: 100%;
bottom: 0;
right: 0;
}
66% {
width: 1px;
height: 1px;
bottom: calc(100% - 1px);
right: 0;
}
100% {
width: 100%;
height: 1px;
bottom: calc(100% - 1px);
right: 0;
}
}
breath Button
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100vh;
overflow: hidden;
background: #ffcfae;
}
button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px 50px;
font-size: 100px;
color: #FFB902;
border-radius: 120px 15px 120px 0px;
border: 1px solid green;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
text-shadow: 0 0 20px #fff;
text-transform: uppercase;
-webkit-animation: breath2 2s 0.5s infinite alternate;
animation: breath2 2s 0.5s infinite alternate;
transition: all 0.2s ease;
cursor: pointer;
border-color: #ffeca8;
background-image: linear-gradient(to bottom, rgba(255, 138, 48, 0.6),
rgba(240, 96, 29, 0.6));
box-shadow: 0 0 70px rgba(255, 138, 48, 0.6),
0 5px 20px rgba(255, 138, 48, 0.6),
inset 0 1px #ffeca8, inset 0 -1px #ffeca8;
color: #ffeca8;
}
button:before {
box-shadow: inset 0 0 30px 0 #ffeca8;
}
button:before {
content: "";
display: block;
width: calc(100% - 88px);
height: calc(100px - 8px);
-webkit-animation: breath 2s infinite alternate;
animation: breath 2s infinite alternate;
left: 41px;
top: 33px;
position: absolute;
background-color: transparent;
border: 1px solid #fff;
border-radius: 45px 3px 45px 3px;
}
@-webkit-keyframes breath {
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(0.95);
}
}
@keyframes breath {
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(0.95);
}
}
@-webkit-keyframes breath2 {
0% {
transform: translate(-50%, -50%) skewX(-10deg) scaleX(1);
}
100% {
transform: translate(-50%, -50%) skewX(-10deg) scaleX(0.95);
}
}
@keyframes breath2 {
0% {
transform: translate(-50%, -50%) skewX(-10deg) scaleX(1);
}
100% {
transform: translate(-50%, -50%) skewX(-10deg) scaleX(0.95);
}
}That’s it for this tutorial. If you have any queries, suggestions or feedback you can comment below. Happy Coding!
إرسال تعليق