Estou fazendo uma borda estilizada no CSS que utiliza o código:
"a.btn-linkedin {
text-align: center;
align-items: center;
justify-content: center;
width: 90px;
co… (saiba mais)
Estou fazendo uma borda estilizada no CSS que utiliza o código:
"a.btn-linkedin {
text-align: center;
align-items: center;
justify-content: center;
width: 90px;
color: white;
box-shadow: 0 0 20px rgba(100, 0, 194, 0.5);
--border-angle: 0turn;
--main-bg: conic-gradient(from var(--border-angle),
rgb(0, 0, 0) 5%,
rgb(0, 0, 0) 60%,
rgb(0, 0, 0) 95%);
border: solid 1.5px transparent;
border-radius: 2em;
--gradient-border: conic-gradient(from var(--border-angle), #945dd6, #8a64d7, #8169d7, #796ed6, #7173d4, #607bd7, #5082d9, #3f89d9, #1194d9, #009dd5, #00a6cf, #13adc7);
background:
var(--main-bg) padding-box,
var(--gradient-border) border-box,
var(--main-bg) border-box;
background-position: center center;
animation: bg-spin 2s linear infinite;
}
@keyframes bg-spin {
to {
--border-angle: 1turn;
}
}
@property --border-angle {
syntax: "<angle>";
inherits: true;
initial-value: 0turn;
}"
Esse código permite a borda do meu button se mover em 360 graus através da border radius do meu botão. Porém esse código somente funciona no Chrome, no Mozilla eu não consigo fazer funcionar. Alguém tem alguma sugestão?
