diff --git a/index.html b/index.html index 5f27c18..1e50f4c 100644 --- a/index.html +++ b/index.html @@ -140,6 +140,78 @@ body { color: var(--gray-500); } +.speak-btn { + background: var(--cyan); + color: var(--ink); + border: none; + border-radius: 50%; + width: 36px; + height: 36px; + font-size: 18px; + cursor: pointer; + margin-top: 8px; + transition: all 0.3s; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.speak-btn:hover { + background: #1be5ff; + transform: scale(1.1); +} + +.speak-btn.speaking { + animation: pulse 0.6s infinite; +} + +@keyframes pulse { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.2); } +} + +.speak-letter-btn { + background: var(--purple); + color: var(--white); + border: none; + border-radius: 50%; + width: 50px; + height: 50px; + font-size: 24px; + cursor: pointer; + margin-top: 15px; + transition: all 0.3s; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.speak-letter-btn:hover { + background: #7B1FA2; + transform: scale(1.1); +} + +.mirror-speak-btn { + background: var(--pink); + color: var(--white); + border: none; + border-radius: 50%; + width: 60px; + height: 60px; + font-size: 28px; + cursor: pointer; + margin: 15px 0; + transition: all 0.3s; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.mirror-speak-btn:hover { + background: #E91E63; + transform: scale(1.1); +} + /* Mirror Exercise */ .mirror-container { display: flex; @@ -484,7 +556,10 @@ body {
Как должна выглядеть буква?
@@ -509,6 +584,7 @@ body {