Front-End
You must be logged in to access this section.
Login/Sign up
let msg = 'error' alert(msg)This answer is only visible to premium members
This answer is only visible to premium members
let msg = 'error' alert(msg)This answer is only visible to premium members
This answer is only visible to premium members
let msg = 'error' alert(msg)This answer is only visible to premium members
This answer is only visible to premium members
<!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>
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>
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>
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>
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>
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>
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>
Submitting answers is currently unavailable.
You must be logged in to access this section.
Login/Sign up 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.