Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.
.button--cta {
border: none;
outline: none;
position: relative;
z-index: 0;
}
.button--cta:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
}
.button--cta:active {
color: #000
}
.button--cta:active:after {
background: transparent;
}
.button--cta:hover:before {
opacity: 1;
}...
.button--cta {
border: none;
outline: none;
position: relative;
z-index: 0;
}
.button--cta:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
}
.button--cta:active {
color: #000
}
.button--cta:active:after {
background: transparent;
}
.button--cta:hover:before {
opacity: 1;
}
.button--cta:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #f2930d;
left: 0;
top: 0;
}
@keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
abi çok teşekürler olduMesela extra.less ekleyerek göre bilirsiniz sonucu;
CSS:.button--cta { border: none; outline: none; position: relative; z-index: 0; } .button--cta:before { content: ''; background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); position: absolute; top: -2px; left:-2px; background-size: 400%; z-index: -1; filter: blur(5px); width: calc(100% + 4px); height: calc(100% + 4px); animation: glowing 20s linear infinite; opacity: 0; transition: opacity .3s ease-in-out; } .button--cta:active { color: #000 } .button--cta:active:after { background: transparent; } .button--cta:hover:before { opacity: 1; } .button--cta:after { z-index: -1; content: ''; position: absolute; width: 100%; height: 100%; background: #f2930d; left: 0; top: 0; } @keyframes glowing { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } }
ama abi turuncu oldu onu nasıl değiştiririmMesela extra.less ekleyerek göre bilirsiniz sonucu;
CSS:.button--cta { border: none; outline: none; position: relative; z-index: 0; } .button--cta:before { content: ''; background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); position: absolute; top: -2px; left:-2px; background-size: 400%; z-index: -1; filter: blur(5px); width: calc(100% + 4px); height: calc(100% + 4px); animation: glowing 20s linear infinite; opacity: 0; transition: opacity .3s ease-in-out; } .button--cta:active { color: #000 } .button--cta:active:after { background: transparent; } .button--cta:hover:before { opacity: 1; } .button--cta:after { z-index: -1; content: ''; position: absolute; width: 100%; height: 100%; background: #f2930d; left: 0; top: 0; } @keyframes glowing { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } }
mavi nasıl yaparız abiMesela extra.less ekleyerek göre bilirsiniz sonucu;
CSS:.button--cta { border: none; outline: none; position: relative; z-index: 0; } .button--cta:before { content: ''; background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); position: absolute; top: -2px; left:-2px; background-size: 400%; z-index: -1; filter: blur(5px); width: calc(100% + 4px); height: calc(100% + 4px); animation: glowing 20s linear infinite; opacity: 0; transition: opacity .3s ease-in-out; } .button--cta:active { color: #000 } .button--cta:active:after { background: transparent; } .button--cta:hover:before { opacity: 1; } .button--cta:after { z-index: -1; content: ''; position: absolute; width: 100%; height: 100%; background: #f2930d; left: 0; top: 0; } @keyframes glowing { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } }
buldum abi teşekürlerMesela extra.less ekleyerek göre bilirsiniz sonucu;
CSS:.button--cta { border: none; outline: none; position: relative; z-index: 0; } .button--cta:before { content: ''; background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); position: absolute; top: -2px; left:-2px; background-size: 400%; z-index: -1; filter: blur(5px); width: calc(100% + 4px); height: calc(100% + 4px); animation: glowing 20s linear infinite; opacity: 0; transition: opacity .3s ease-in-out; } .button--cta:active { color: #000 } .button--cta:active:after { background: transparent; } .button--cta:hover:before { opacity: 1; } .button--cta:after { z-index: -1; content: ''; position: absolute; width: 100%; height: 100%; background: #f2930d; left: 0; top: 0; } @keyframes glowing { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } }
Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.
Bu sitenin çalışması için temel çerezleri ve deneyiminizi geliştirmek için isteğe bağlı çerezleri kullanıyoruz.