آدرس : تهران ، خیابان آزادی ، خیابان رودکی شمالی ، پلاک ۸۷۰
تلفن ثابت : 02166421387
تلفن همراه : 09198661229
تلفن همراه : 09302974451
ایمیل : info@woham.com
کدنویسی و آموزش برنامه نویسی دکمه شناور با استفاده از HTML و CSS برای بهینه سازی کدهای قالب وب سایت و طراحی سایت با سرعت لود سریع … در این آموزش ما به شما نشان خواهیم داد که چگونه با استفاده از HTML و CSS یک دکمه در شناور نشان دهید. این روش برای صرفه جویی در فضای صفحه وب بسیار مفید است و همچنین ظاهری مدرن به صفحه وب شما می دهد.
ما از این روش برای تصاویر استفاده می‌کنیم، اما شما می‌توانید از این روش در هر جایی که بخواهید استفاده کنید. همچنین ممکن است با استفاده از CSS3 تصویر بزرگ‌نمایی را دوست داشته باشید.
برای نمایش دکمه در حالت شناور فقط دو مرحله طول می کشد:
مرحله 1. یک فایل HTML بسازید و نشانه گذاری را تعریف کنید.
یک فایل HTML می سازیم و با نام show_button.html ذخیره می کنیم.
<html>
<head>
<link rel="stylesheet" type="text/css" href="button_style.css">
</head>
<body>
<div id="wrapper">
<div id="image_div">
<p class="img_wrapper">
<img decoding="async" src="images/image1.jpg">
<span><input type="button" value="PLAY"></span>
</p>
<p class="img_wrapper">
<img decoding="async" src="images/image2.jpg">
<span><input type="button" value="PAUSE"></span>
</p>
<p class="img_wrapper">
<img decoding="async" src="images/image3.jpg">
<span><input type="button" value="RESUME"></span>
</p>
</div>
</div>
</body>
</html>
در این مرحله سه تصویر اضافه می کنیم و سپس سه دکمه برای نمایش ایجاد می کنیم.
ما از تصاویر استفاده می‌کنیم زیرا می‌خواهیم وقتی کاربر روی تصاویر ماوس می‌شود دکمه را نشان دهیم، می‌توانید از هر چیزی که می‌خواهید به جای تصاویر استفاده کنید و هم تصویر و هم دکمه را در تگ <p> بپیچید. روی تصویر نشان داده نخواهد شد.
همچنین ممکن است دوست داشته باشید که دکمه ارسال را با استفاده از jQuery غیرفعال کنید.
مرحله 2. یک فایل CSS بسازید و یک استایل تعریف کنید.
یک فایل CSS می سازیم و با نام button_style.css ذخیره می کنیم.
body
{
text-align:center;
width:995px;
margin:0 auto;
padding:0px;
font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
background-color:#E0F2F7;
}
#wrapper
{
margin:0 auto;
padding:0px;
text-align:center;
width:995px;
}
#wrapper h1
{
margin-top:150px;
font-size:55px;
color:#0489B1;
}
#wrapper h1 a
{
color:#0489B1;
font-size:18px;
}
#image_div .img_wrapper
{
width:180px;
position:relative;
display:inline-block;
}
#image_div .img_wrapper img
{
width:100%;
}
#image_div .img_wrapper:hover img
{
-webkit-filter: blur(1.7px);
}
#image_div .img_wrapper span
{
display:none;
position:absolute;
top:40px;
left:30px;
}
#image_div .img_wrapper:hover span
{
display:table-cell;
}
#image_div .img_wrapper span input[type="button"]
{
width:120px;
height:40px;
background-color:#00BFFF;
border:none;
color:white;
font-weight:bold;
font-size:17px;
}
در این مرحله از یک استایل ساده برای نشان دادن دکمه روی تصویر زمانی که کاربر روی تصویر شناور میکند، استفاده می‌کنیم.
یکی از مهمترین چیزهایی که استفاده می کنیم position:relative در img_wrapper و position:absolute در span است تا دکمه ما در داخل محفظه تصویر نشان داده شود.
همچنین ممکن است دوست داشته باشید متن را روی تصویر نمایش دهید.
این همه چیز است، این نحوه نمایش دکمه روی شناور با استفاده از HTML و CSS است. شما می توانید این کد را مطابق با نیاز خود سفارشی کنید. و لطفاً نظرات خود را در مورد این آموزش بیان کنید.