Techniques
3D Push Button
The Duolingo signature — every primary action sits on a hard bottom-shadow the exact color of its 600-shade. On press, it "clunks" down by translating Y and collapsing the shadow.
.duo-button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 0 24px;
background: #58CC02;
color: #FFFFFF;
border: 2px solid #58CC02;
border-radius: 16px;
box-shadow: 0 4px 0 #46A302;
font-family: 'Nunito', sans-serif;
font-weight: 800;
font-size: 16px;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
transition: transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 120ms ease,
background 120ms ease;
}
.duo-button:hover {
background: #61E002;
transform: translateY(-1px);
box-shadow: 0 5px 0 #46A302;
}
.duo-button:active {
transform: translateY(4px);
box-shadow: 0 0 0 #46A302;
}
Streak Flame Badge
The gamified status pill — a rounded container with a thick border, bold number, and emoji-style flame that subtly pulses to draw the eye.
.duo-streak {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: #FFF0B3;
border: 2px solid #FFC800;
border-radius: 9999px;
box-shadow: 0 2px 0 #CCA000;
font-family: 'Nunito', sans-serif;
font-weight: 900;
font-size: 18px;
color: #4B4B4B;
}
.duo-streak::before {
content: "🔥";
font-size: 20px;
animation: duo-flicker 1.2s ease-in-out infinite;
transform-origin: bottom center;
}
@keyframes duo-flicker {
0%, 100% { transform: scale(1) rotate(-2deg); }
50% { transform: scale(1.08) rotate(2deg); }
}
Progress Arc Bar
The lesson progress indicator — a chunky rounded pill with an inner fill that animates with a spring ease, mirroring the bouncy personality of the app.
.duo-progress {
position: relative;
height: 16px;
background: #E5E5E5;
border-radius: 9999px;
overflow: hidden;
}
.duo-progress__fill {
height: 100%;
width: var(--progress, 40%);
background: linear-gradient(180deg, #79D635 0%, #58CC02 100%);
border-radius: 9999px;
box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35);
transition: width 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}