پشتیبانی مدرسه آنلاین دورآموز
Loading...

جستجو در دورآموز

برکشت به انجمن
رامین اسلامی
رامین اسلامی
آموزش طراحی وب-پاسارگاد
برنامه نویسی
پنج شنبه، ۱۳ تیر ۱۳۹۸ ساعت ۱۵:۲۲:۲۰

نحوه ایجاد دکمه 3بعدی 3d-button در html css

بک دکمه فشاری و سه بعدی در html css به جه صورتی ایجاد می شود

 



پاسخ ها

Younes Sp
Younes Sp
پنج شنبه، ۱۳ تیر ۱۳۹۸ ساعت ۱۵:۲۴:۱۵

میتونید داخل سایت 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*


جهت درج پاسخ ابتدا باید وارد شوید

برکشت به انجمن
سوالات متداول دورآموز