<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 30px; background: #f0f4f8; text-align: center; }
        .btn { display: inline-block; padding: 12px 30px; margin: 10px; border-radius: 10px; font-weight: bold; font-size: 16px; cursor: pointer; transition: all 0.3s ease; border: none; color: white; }
        .btn-1 { background: #2E86AB; }
        .btn-1:hover { background: #1B3A5C; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(46,134,171,0.4); }
        .btn-2 { background: #E84D3D; }
        .btn-2:hover { background: #c0392b; transform: scale(1.1); }
        .btn-3 { background: #27AE60; }
        .btn-3:hover { border-radius: 30px; padding: 12px 50px; }

        .card { display: inline-block; width: 200px; padding: 30px; margin: 15px; background: white; border-radius: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: all 0.4s ease; }
        .card:hover { transform: translateY(-10px) rotate(2deg); box-shadow: 0 15px 30px rgba(0,0,0,0.2); }
        .card h3 { transition: color 0.3s; }
        .card:hover h3 { color: #2E86AB; }
    </style>
</head>
<body>
    <h2>Hover Effektlar</h2>
    <div class="btn btn-1">Ko'tarilish</div>
    <div class="btn btn-2">Kattalashish</div>
    <div class="btn btn-3">Yumaloq</div>
    <br><br>
    <div class="card"><h3>Karta 1</h3><p>Ustimga kel</p></div>
    <div class="card"><h3>Karta 2</h3><p>Ustimga kel</p></div>
    <div class="card"><h3>Karta 3</h3><p>Ustimga kel</p></div>
</body>
</html>