CodeSolved

A comprehensive source of programming questions and exercises

Build Neon button

Practice Easy 13/ Download 842 Views

Create a button below:

When the mouse marker is placed on it:

7 Answers

<!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 Download 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>
Unun..ali..nunu Download 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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button class="neon-button">تماس با ما</button>
</body>
</html>
Arman.danyy Download 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; # Transformation
        }
    </style>
</head>
<body>

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

</body>
</html>
Mma123 Download 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 Download HTML & CSS 
<button style="color:blue;">ثبت نام</button>
<style>
button::hover{
background_color:blue;
color:#fff
}
User 669 Download 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 Download HTML & CSS

Submit answer

Submitting answers is currently unavailable.

Related content

Detection using AI
×

حساب کاربری

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

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

I can't solve this exercise 😞

If you don’t understand the exercise or can’t solve it for any reason, that’s completely normal—don’t worry 😊
Try checking out easier exercises and reviewing different answers submitted by others. Gradually, you can move on to more challenging exercises. Also, your answer might be correct even if it’s different from others.

Close