تمرین برنامه نویسی؛ با کدبزن!

منبع جامع سوالات و تمرینات برنامه نویسی

ساخت دکمه نئونی

آسان 13/ دانلود 607 بازدید

دکمه ای به شکل زیر بسازید:

که وقتی نشانگر موس روی آن قرار گرفت به شکل زیر درآید:

6 جواب

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>دکمه نئونی</title>
</head>
<style>
    a{
        color: rgb(39, 118, 221); 
        border: 2px solid rgb(39, 118, 221);
        border-radius: 10px;
        text-decoration: none;
        font-weight: bold;
        padding: 5px 30px 5px 30px;
        text-align: center;
        box-shadow: 0 0 5px rgb(39, 118, 221);
        text-shadow: 0 0 4px rgb(39, 118, 221);
   
    }
   a:hover{
        background-color: rgb(39, 118, 221);
        color: white;
        transition:  0.5s;
    }

</style>
<body>
    <a href="#">متن شما</a>
    
</body>
</html>
Hadi.jalooli دانلود HTML & CSS
CSS___________________
    div
    {
      display: inline-block;
      padding: 1px 40px;
      border: 2px solid blue;
      color: blue;
      border-radius: 5px;
      user-select: none;
      transition:all .5s;
    }

    div:hover
    {
      background-color: blue;
      color: white;
    }

HTML__________________
   <div>
     ثبت نام
   </div>
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>دکمه نئونی</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button class="neon-button">تماس با ما</button>
</body>
</html>
Arman.danyy دانلود HTML & CSS
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>دکمه تغییر شکل</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }

        .button {
            padding: 15px 30px;
            font-size: 16px;
            color: white;
            background-color: #007BFF;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .button:hover {
            background-color: #0056b3;
            transform: scale(1.1);
            border-radius: 20px; /* تغییر شکل به دایره‌ای */
        }
    </style>
</head>
<body>

    <button class="button">دکمه</button>

</body>
</html>
Mma123 دانلود HTML & CSS
<button style="color:blue;">ثبت نام</button>
<style>
button::hover{
background_color:blue;
color:#fff
}
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>دکمه تغییر شکل</title>
    <style>
        .button {
            padding: 15px 30px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 16px;
        }

        .button:hover {
            border-radius: 50%;
            background-color: #0056b3;
            padding: 15px;
        }
    </style>
</head>
<body>
<button class="button">دکمه</button>
</body>
</html>
<< صفحه قبل 1 صفحه بعد >>

ارسال جواب

// کداتو توی این بخش بنویس
// فرقی نمیکنه چه زبان برنامه نویسی باشه، همرو پشتیبانی میکنیم :)
// البته قبلش این سه خط رو پاک کن
                    
  • لطفا جواب های تکراری ارسال نکن
  • قبل از ارسال، جوابت رو داخل یک کد ادیتور مثل vscode بنویس و بعد اینجا Paste کن
  • جواب های ارسالی، پس از بررسی کوتاهی، ویرایش میشن و در سایت نمایش داده میشن
  • ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

تمرینات مرتبط

تشخیص با استفاده از هوش مصنوعی
×
×
بستن