Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
If you want to use this code in your Editor, Then Remember You should Have to Remove The Comment Symbols /* From the Code.
In order to Do That Before The Body Section Of this Coding Remove /* This Symbols From Code.
HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and latest major version of HTML that is a World Wide Web Consortium recommendation.
Following is the HTML5 Main Body Structure Code for this attractive button animations effects.
If you want to use this code in your Editor, Then Remember You should Have to Remove The Comment Symbols /* From the Code.
In order to Do That Before The Body Section Of this Coding Remove /* This Symbols From Code.
It is the CSS code for this amazing animations.
/*body
{
margin: 0;
padding: 0;
background: #0c002b;
font-family: sans-serif;
}
a
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #1670f0;
padding: 30px 60px ;
font-size: 30px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 20px 50px rgba(0,0,0,.5);
overflow: hidden;
}
a:before
{
content: '';
position: absolute;
top: 2px;
left: 2px;
bottom: 2px;
width: 50%;
background: rgba(255,255,255,.05);
}
a span:nth-child(1)
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right,#0c002b,#1779ff)
;
animation: animate1 2s linear infinite;
}
@keyframes animate1
{
0%
{
transform: translateX(-100%);
}
100%
{
transform: translateX(100%);
}
}
a span:nth-child(2)
{
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(to bottom,orange,#1779ff)
;
animation: animate2 2s linear infinite;
animation-delay: 1s;
}
@keyframes animate2
{
0%
{
transform: translateY(-100%);
}
100%
{
transform: translateY(100%);
}
}
a span:nth-child(3)
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to left,red,#1779ff)
;
animation: animate3 2s linear infinite;
}
@keyframes animate3
{
0%
{
transform: translateX(100%);
}
100%
{
transform: translateX(-100%);
}
}
a span:nth-child(4)
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to top,yellow,#1779ff)
;
animation: animate4 2s linear infinite;
animation-delay: 1s;
}
@keyframes animate4
{
0%
{
transform: translateY(100%);
}
100%
{
transform: translateY(-100%);
}
}
<--this is another coding-->
ul
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
padding: 0;
display: none;
}
ul li
{
list-style: none;
font-family: arial;
font-size: 5em;
letter-spacing: 15px;
color: #484848;
text-shadow: none;
animation: animate 1s infinite linear
}
@keyframes animate
{
0%
{
color: #484848;
text-shadow: none;
}
18%
{
color: #484848;
text-shadow: none;
}
20%
{
color: #fff900;
text-shadow: 0 0 7px #fff900,0 0 20px #ff6c00;
}
30%
{
color: #484848;
text-shadow: none;
}
35%
{
color: #fff900;
text-shadow: 0 0 7px #fff900,0 0 20px #ff6c00;
}
70%
{
color: #484848;
text-shadow: none;
}
85%
{
color: #fff900;
text-shadow: 0 0 7px #fff900,0 0 20px #ff6c00;
}
90%
{
color: #484848;
text-shadow: none;
}
100%
{
color: #484848;
text-shadow: none;
}
}
ul li:nth-child(1)
{
animation-delay: .2s;
}
ul li:nth-child(2)
{
animation-delay: .4s;
}
ul li:nth-child(3)
{
animation-delay: .6s;
}
ul li:nth-child(4)
{
animation-delay: .8s;
}
ul li:nth-child(5)
{
animation-delay: 1s;
}
ul li:nth-child(6)
{
animation-delay: 1.2s;
}
ul li:nth-child(7)
{
animation-delay: 1.4s;
}
ul li:nth-child(8)
{
animation-delay: 1.6s;
}
ul li:nth-child(9)
{
animation-delay: 1.8s;
}
ul li:nth-child(10)
{
animation-delay: 2s;
}
ul li:nth-child(11)
{
animation-delay: 2.2s;
}HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and latest major version of HTML that is a World Wide Web Consortium recommendation.
Following is the HTML5 Main Body Structure Code for this attractive button animations effects.
0 Comments
Welcome! Please Comment Without Any Hesitation.
Thank You