حالت آفلاین — محتوا از حافظهٔ کش نمایش داده می‌شود
همهٔ تمرین‌ها

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

تمرین آسان 2207 visibility link download flag

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

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

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

پاسخ‌ها 19

<!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="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Neon button</title>
    <style>
      body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
      }

      #btn {
        border: 2px solid #fd00ba;
        padding: 10px 18px;
        font-size: 1.5rem;
        font-weight: bold;
        border-radius: 10px;
        color: #fd00ba;
        box-shadow: 0 0 10px #fd00ba ;
        text-shadow: 0 0 3px #fd00ba;
        transition: background-color 0.5s, color 0.5s;
      }

      #btn:hover {
        background-color: #fd00ba;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <button id="btn">Neon button</button>
  </body>
</html>
Komeil.moradi 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 
<button style="color:blue;">ثبت نام</button>
<style>
button::hover{
background_color:blue;
color:#fff
}
User 669 HTML & CSS 
<!--محتوای فایل اچ تی ام ال-->

<!DOCTYPE html>
<html>

    <head>
    <title>Project</title>
    <link rel="stylesheet" href="project.css" title="text/css">
    </head>

    <body dir="rtl">
        <div>
            <button id="bu1">ثبت نام</button>
        </div> 
    </body>

</html>

<!--محتوای فایل سی اس اس-->

@charset 'utf-8';
*{
    padding: 0px;
    margin: 0xp;
    font-style: italic;
}
#bu1{
    width: 150px;
    border: 2px solid rgb(1, 108, 238);
    border-radius: 5px;
    font-size: larger;
    color: rgb(70, 107, 255);
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 0px 2px rgb(106, 105, 105);
}
div{
    margin: 150px auto;
}
#bu1:hover {
    color: white;
    background-color: rgb(1, 108, 238);
}
Mohammad.mahdi88 HTML & CSS 
from tkinter import *

def on_enter(e):    win_btn.config(bg="blue",fg="white",cursor="hand2")
def on_leave(e):    win_btn.config(bg="white",fg="blue",cursor="arrow")

win = Tk()
win.title("singin")
win.geometry("350x350")
win.resizable(False,False)
win.config(background="black")

win_btn = Button(win,text="ثبت نام", width=20,font=("arial",16),bg="white",fg="blue",border=17)
win_btn.pack(padx=60,pady=80)

win_btn.bind("<Enter>", on_enter)
win_btn.bind("<Leave>", on_leave)

win.mainloop()
Sumy.amiri Python

برای ساخت دکمه‌ای که با قرار گرفتن نشانگر ماوس روی آن تغییر شکل دهد، می‌توانید از HTML و CSS استفاده کنید. در زیر یک مثال ساده آورده شده است:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .button {
            width: 100px;
            height: 50px;
            background-color: #4CAF50; /* رنگ اولیه */
            border: none;
            color: white;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            transition: background-color 0.3s, transform 0.3s;
        }

        .button:hover {
            background-color: #45a049; /* رنگ تغییر یافته */
            transform: scale(1.1); /* بزرگتر شدن */
        }
    </style>
</head>
<body>

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

</body>
</html>

این کد یک دکمه ساده با رنگ پس‌زمینه سبز ایجاد می‌کند که با قرار گرفتن ماوس روی آن، رنگ و اندازه‌اش تغییر می‌کند.

پاسخ هوش مصنوعی Ai 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>
        .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>
User 136 HTML & CSS

ارسال جواب

جوابت را با Markdown بنویس و ثبت کن

×

حساب کاربری

برای استفاده از این بخش باید وارد حساب کاربریت بشی

ورود/ثبت نام
بستن