CodeSolved

Solved Programming Questions & Exercises

Build Neon button

Practice Easy Download

1077 Views

Front-End

Create a button below:

When the mouse marker is placed on it:

8 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

H

Download

<!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

P

Download

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

U

Download

<!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

S

Download

<!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

M

Download

<!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

S

Download

<button style="color:blue;">ثبت نام</button>
<style>
button::hover{
background_color:blue;
color:#fff
}

User 669

6

Download

<!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

1

Download

Submit answer

Submitting answers is currently unavailable.

Related content

Detection using AI

×

Close