Креативная кнопка на чистом CSS с анимацией
- Последнее обновление: 3 Ноября 2023 г.
- Просмотры: 78
- Автор: Админ
Коллеги всем привет.
В сегодняшней статье я вам покажу как можно создать креативную кнопку с анимацией на чистом 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%);
}
}
Всем спасибо, я надеюсь что вам моя статья хоть чем-то помогла.
