diff --git a/Toggle-switches/OrdinaryButtonto changetheweather.html b/Toggle-switches/OrdinaryButtonto changetheweather.html
new file mode 100644
index 0000000..91ff294
--- /dev/null
+++ b/Toggle-switches/OrdinaryButtonto changetheweather.html	
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Animated Switch</title>
+    <style>
+        /* Основные стили */
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background: linear-gradient(135deg, #e0eafc, #cfdef3);
+            font-family: 'Arial', sans-serif;
+        }
+
+        .switch-container {
+            cursor: pointer;
+            position: relative;
+            display: inline-block;
+            width: 60px;
+            height: 30px;
+            border-radius: 15px;
+            background: #6B6D76;
+            overflow: hidden;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+            transition: background 0.4s ease;
+        }
+
+        .switch-container input {
+            display: none;
+        }
+
+        .switch-container .slider {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, #60A7FA, #2F8EFC);
+            transition: transform 0.4s ease;
+        }
+
+        .switch-container .dot {
+            position: absolute;
+            top: 50%;
+            left: 5px;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: #fff;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+            transform: translateY(-50%);
+            transition: transform 0.4s ease;
+        }
+
+        .switch-container input:checked + .slider {
+            transform: translateX(100%);
+        }
+
+        .switch-container input:checked + .slider + .dot {
+            transform: translate(30px, -50%);
+        }
+
+        /* Анимация облаков */
+        .cloud {
+            position: absolute;
+            width: 40px;
+            height: 20px;
+            background: #fff;
+            border-radius: 20px;
+            opacity: 0.8;
+            filter: blur(2px);
+            animation: float 5s linear infinite;
+        }
+
+        .cloud.two {
+            width: 50px;
+            height: 25px;
+            left: 20px;
+            animation-delay: 2s;
+        }
+
+        @keyframes float {
+            0% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0); }
+        }
+    </style>
+</head>
+<body>
+
+<label class="switch-container">
+    <input type="checkbox">
+    <div class="slider"></div>
+    <div class="dot"></div>
+    <div class="cloud"></div>
+    <div class="cloud two"></div>
+</label>
+
+</body>
+</html>
