Follow techAU on X
Subscribe for behind-the-scenes exclusive content
Follow →
.techau-x-promo {
display: block;
text-decoration: none !important;
color: #fff !important;
position: relative;
overflow: hidden;
border-radius: 16px;
margin-bottom: 1.5rem;
max-width: 100%;
background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 45%, #0c4a6e 100%);
border: 1px solid rgba(56, 189, 248, 0.18);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Animated glow ring on hover */
.techau-x-promo::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 18px;
background: linear-gradient(135deg, #38bdf8, #818cf8, #c084fc, #38bdf8);
background-size: 300% 300%;
z-index: 0;
opacity: 0;
transition: opacity 0.4s ease;
animation: techau-border-shift 6s linear infinite;
}
.techau-x-promo:hover::before {
opacity: 0.7;
}
.techau-x-promo:hover {
transform: translateY(-4px) scale(1.015);
box-shadow: 0 14px 36px rgba(56, 189, 248, 0.25), 0 8px 24px rgba(0, 0, 0, 0.4);
border-color: transparent;
}
/* Large faded X as background element */
.techau-x-bg-logo {
position: absolute;
right: -18px;
bottom: -22px;
width: 140px;
height: 140px;
color: rgba(255, 255, 255, 0.06);
pointer-events: none;
z-index: 1;
transition: all 0.5s ease;
}
.techau-x-promo:hover .techau-x-bg-logo {
color: rgba(56, 189, 248, 0.12);
transform: scale(1.08) rotate(-6deg);
}
.techau-x-inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 0.9rem;
padding: 1.25rem 1.3rem 1.3rem;
}
.techau-x-logo {
width: 42px;
height: 42px;
background: linear-gradient(135deg, #38bdf8, #6366f1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 0 0 5px rgba(56, 189, 248, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.techau-x-promo:hover .techau-x-logo {
transform: scale(1.08);
box-shadow: 0 0 0 7px rgba(56, 189, 248, 0.28);
}
.techau-x-logo svg {
color: #fff;
}
.techau-x-text {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.techau-x-text strong {
font-size: 1.15rem;
font-weight: 700;
line-height: 1.25;
color: #fff;
letter-spacing: -0.02em;
}
.techau-x-text span {
font-size: 0.875rem;
line-height: 1.4;
color: #94a3b8;
}
.techau-x-btn {
display: inline-flex;
align-items: center;
align-self: flex-start;
background: linear-gradient(90deg, #38bdf8, #6366f1);
color: #fff;
font-weight: 600;
font-size: 0.9rem;
padding: 0.55rem 1.25rem;
border-radius: 9999px;
transition: all 0.25s ease;
box-shadow: 0 4px 14px rgba(56, 189, 248, 0.35);
}
.techau-x-promo:hover .techau-x-btn {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45);
filter: brightness(1.08);
}
/* Moving gradient animation for the border */
@keyframes techau-border-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Mobile tweaks */
@media (max-width: 782px) {
.techau-x-inner {
padding: 1.15rem 1.15rem 1.2rem;
gap: 0.8rem;
}
.techau-x-bg-logo {
width: 120px;
height: 120px;
right: -12px;
bottom: -18px;
}
.techau-x-text strong {
font-size: 1.08rem;
}
}
css along with watching the 5min getting started video you’ll have Edge down in 10min. At the moment the tools and options available are limited but effective. You can see the different options available to edit objects.
