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

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

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

تمرین آسان 13/ دانلود 1440 بازدید

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

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

👨‍💻 6 ساعت قبل کاربر ناشناس این تمرین رو مشاهده کرد

14 جواب

این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
let msg = 'error'
alert(msg) 
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است

برای مشاهده این جواب باید اشتراک داشته باشی

دریافت اشتراک
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
let msg = 'error'
alert(msg) 
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است

برای مشاهده این جواب باید اشتراک داشته باشی

دریافت اشتراک
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است
let msg = 'error'
alert(msg) 
این جواب فقط برای مشترکین ویژه قابل مشاهده است
این جواب فقط برای مشترکین ویژه قابل مشاهده است

برای مشاهده این جواب باید اشتراک داشته باشی

دریافت اشتراک
<!DOCTYPE html>
<html>
  <head>
    <style>
      a {
        color: rgb(0, 140, 255);
        border: 2px solid rgb(0, 140, 255);
        padding: 5px;
        text-decoration: none;
        box-shadow:0 0 5px rgb(0, 140, 255);
        text-shadow: 0 0 2px rgb(0, 140, 255);
        border-radius: 5px;
        font-weight: bold;
        font-size: 20px;
      }
      a:hover {
        color:white;
        background-color:rgb(0, 140, 255);
      }
    </style>
  </head>
  <body>
    <a href="#">Go To Home</a>
  </body>
</html>
Programmer دانلود HTML & CSS
<!DOCTYPE html>
<html lang="fa">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SignUp</title>
    <style>
        * {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: white;
        }


        .button {
            padding: 15px 30px;
            background-color: rgba(255, 255, 255, 0.76);
            color: blue;
            border: rgb(0, 140, 255) 3px solid;
            width: 200px;
            height: 50px;
            box-shadow: 0 4px 8px rgba(0, 200, 255, 0.83);
            text-decoration: none;
            font-weight: bold;
            text-transform: uppercase;
            display: inline-block;
            margin: 15px;
            outline: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.4s ease;
            font-size: 14px;
            text-decoration: none;
            text-align: center;
        }

        .button:hover {
            border-radius: 4px;
            background-color: #0056b3;
            padding: 10px;
            color: white;
            box-shadow: 0 4px 8px rgba(0, 200, 255, 0.83);
            border: #0056b3 2px solid;
            transform: scale(1.1);
        }

        .easy {
            position: absolute;
            color: rgba(0, 200, 255, 0.83);
            bottom: 20px;
            text-align: center;
            font-style: italic;
        }
    </style>
</head>

<body>
    <button class="button">SignUp</button>
    <div class="easy">
        <h3>easy!</h3>
    </div>
</body>

</html>
User 4342 دانلود 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>
Sumy.amiri دانلود 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
<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
        .container{
              margin-top: 300px;
        }
        .btn{
          background-color: white;
          color: #039be5;
          padding: 10px 60px 10px 60px;
          border-color: #039be5;
          border-radius: 9px;
          font-size: 20px;
          font-family: Arial, Helvetica, sans-serif;
        }     
        .btn:hover{
          background-color: #039be5;
          color: white;
        }
  </style>
  <title>neon button</title>
</head>
<body>
      <center>
        <div class="container">
          <button class="btn">ثبت نام</button>
        </div>
      </center>
</body>
</html>
Sajad.karimi دانلود HTML & CSS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>دکمه نئونی</title>
    <style>
        .box{
            border: 2px solid rgb(115, 115, 243);
            display: inline-block;
            border-radius: 10px;
            background-color: #ffffff;
            color: rgb(115, 115, 243);
            box-shadow: 2px 1px 20px rgb(115, 115, 243);
            transition: all 0.5s;
        }
        h2{
            margin-left: 100px;
            margin-right: 110px;
            font-size: 20px;
            padding: 5px;
        }
        .box:hover{
            background-color: rgb(115, 115, 243);
            color: #ffffff;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>ثبت نام</h2>
    </div>
</body>
</html>

F.sarli دانلود HTML & CSS
<< صفحه قبل 1 2 صفحه بعد >>

ارسال جواب

  • قبل از ارسال جواب ویدیو زیر رو ببین تا کار کردن با markdown رو یاد بگیری
  • لطفا جواب های تکراری ارسال نکن
  • سعی کن داخل کدت از کلمات فارسی یا فینگلیش (فارسی با حروف انگلیسی) استفاده نکنی و کدت تماما انگلیسی باشه
  • لطفا داخل جواب از ایموجی یا کاراکترهای خاص استفاده نکن
  • ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

راهنمای ارسال جواب 👇

مطالب مرتبط

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