Креативна кнопка на чистому CSS з анімацією
- Останнє оновлення: 3 Листопада 2023 р.
- Перегляди: 32
- Автор: Адмін
Колеги всім привіт.
У сьогоднішній статті я вам покажу, як можна створити креативну кнопку з анімацією на чистому html і css без використання javascript.
HTML код:
<body>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
BUTTON
</a>
</body>
Код CSS:
body {
background-color: #EDF9FF;
padding: 0;
margin: 0;
}
a {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #4589B0;
padding: 35px 50px;
font-size: 50px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 2px 20px #1D628B;
overflow: hidden;
}
a span:nth-child(1) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, #BFE6EC, #1D628B);
animation: span_animate1 1s linear infinite;
}
@keyframes span_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, #BFE6EC, #1D628B);
animation: span_animate2 1s linear infinite;
}
@keyframes span_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, #BFE6EC, #1D628B);
animation: span_animate3 1s linear infinite;
}
@keyframes span_animate3 {
0%{
transform: translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
a span:nth-child(4) {
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(to top, #BFE6EC, #1D628B);
animation: span_animate4 1s linear infinite;
}
@keyframes span_animate4 {
0%{
transform: translateY(100%);
}
100%{
transform: translateY(-100%);
}
}
Дякую всім, я сподіваюся що вам моя стаття хоч чимось допомогла.
