بک دکمه فشاری و سه بعدی در html css به جه صورتی ایجاد می شود
میتونید داخل سایت w3schools نگاه کنید.
<html>
<head>
<title>Untitled</title>
<style>
.btn{
padding: 20px 30px;
display: inline-block;
cursor: pointer;
font-size: 20px;
text-decoration: none;
text-align: center;
color: white;
background-color: lightblue;
border-radius: 20px;
box-shadow:-10px 15px 2px 5px #808080;
}
.btn:hover{
background-color: darkblue;
}
.btn:active{
background-color: green;
box-shadow: 0 5px #666;
transform:translateY(4px);
}
</style>
</head>
<body>
<a href="#" class="btn">3D BUTTON</a>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<style>
body {
font-family: Helvetica, Arial, sans-serif;
background: #d6d6d6;
text-align: center;
padding: 50px 0;
-webkit-perspective: 400px;
}
.button {
display: inline-block;
text-decoration: none;
color: #fff;
font-weight: bold;
background-color: #538fbe;
padding: 20px 70px;
font-size: 24px;
border: 1px solid #2d6898;
}
.button {
display: inline-block;
text-decoration: none;
color: #fff;
font-weight: bold;
background-color: #538fbe;
padding: 20px 70px;
font-size: 24px;
border: 1px solid #2d6898;
background-image: linear-gradient(bottom, rgb(73, 132, 180) 0%, rgb(97, 155, 203) 100%);
background-image: -o-linear-gradient(bottom, rgb(73, 132, 180) 0%, rgb(97, 155, 203) 100%);
background-image: -moz-linear-gradient(bottom, rgb(73, 132, 180) 0%, rgb(97, 155, 203) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(73, 132, 180) 0%, rgb(97, 155, 203) 100%);
background-image: -ms-linear-gradient(bottom, rgb(73, 132, 180) 0%, rgb(97, 155, 203) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(73, 132, 180)),
color-stop(1, rgb(97, 155, 203))
);
}
.button:hover {
background-image: linear-gradient(bottom, rgb(79, 142, 191) 0%, rgb(102, 166, 214) 100%);
background-image: -o-linear-gradient(bottom, rgb(79, 142, 191) 0%, rgb(102, 166, 214) 100%);
background-image: -moz-linear-gradient(bottom, rgb(79, 142, 191) 0%, rgb(102, 166, 214) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(79, 142, 191) 0%, rgb(102, 166, 214) 100%);
background-image: -ms-linear-gradient(bottom, rgb(79, 142, 191) 0%, rgb(102, 166, 214) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(79, 142, 191)),
color-stop(1, rgb(102, 166, 214))
);
}
.button {
display: inline-block;
text-decoration: none;
color: #fff;
font-weight: bold;
background-color: #538fbe;
padding: 20px 70px;
font-size: 24px;
border: 1px solid #2d6898;
background-image: linear-gradient(bottom, rgb(73, 132, 180) 0%, rgb(97, 155, 203) 100%);
background-image: -o-linear-gradient(bottom, rgb(73, 132, 180) 0%, rgb(97, 155, 203) 100%);
background-image: -moz-linear-gradient(bottom, rgb(73, 132, 180) 0%, rgb(97, 155, 203) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(73, 132, 180) 0%, rgb(97, 155, 203) 100%);
background-image: -ms-linear-gradient(bottom, rgb(73, 132, 180) 0%, rgb(97, 155, 203) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(73, 132, 180)),
color-stop(1, rgb(97, 155, 203))
);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 6px 0 #2b638f, 0 3px 15px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .3),
inset 0 0 3px rgba(255, 255, 255, .5);
-moz-box-shadow: 0 6px 0 #2b638f, 0 3px 15px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .3),
inset 0 0 3px rgba(255, 255, 255, .5);
box-shadow: 0 6px 0 #2b638f, 0 3px 15px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .3),
inset 0 0 3px rgba(255, 255, 255, .5);
}
.button {
-webkit-transform: translate(0, 4px);
-moz-transform: translate(0, 4px);
transform: translate(0, 4px);
}
.button {
-webkit-transform: rotateX(20deg);
border: #4e8bb2 solid 4px;
border-radius: 5px;
box-shadow: 5px 10px 9px 1px black;
}
</style>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<a href="#" class="button">Mohamad Amin Zaree*</a>
<br><hr><br><br>
<address>Create And Edited by Mohamad Amin Zaree*</address>
</body>
</html>
=======================================================================================================================
ایجاد دکمه ( 3 بعدی ) توسط ( اچ تی ام ال ) و ( سی اس اس ) و اینکه استاد اسلامی اینجور دکمه هارو با ( جاوا اسکریپت) بزنیم خیلی بهتر و جالب تر نیست؟
Create By Mohamad Amin Zaree*
جهت درج پاسخ ابتدا باید وارد شوید
برکشت به انجمن
از دوره های دورآموز و شرایط آن دیدن نمایید
