কীভাবে একটি স্বচ্ছ এইচটিএমএল বোতাম তৈরি করবেন?

Question

আমি ওয়েবসাইট তৈরির জন্য ড্রিমউইভারটি ব্যবহার করছি এবং আমি ব্যাকগ্রাউন্ড তৈরি করতে ফটোশপ ব্যবহার করার কথা ভেবেছিলাম। আমি কেবল তাই করার সিদ্ধান্ত নিয়েছি কারণ আমি কেবল কোডগুলি সম্পাদনা করে সহজেই বোতামটির নামটি বেছে নিতে চাইতাম, আমি কেবল কোডটি উল্লেখ করতে পারি। যদি আমি ফটোশপ ব্যবহার করে বোতামগুলি তৈরি করি তবে আমি এই বোতামগুলিতে বা কোনও উপাদানগুলিতে সহজেই পাঠ্য সম্পাদনা করতে সক্ষম হব না।

সুতরাং আমার প্রশ্নটি সহজ, আমি কীভাবে এমন একটি বোতাম তৈরি করব যা একটি সাধারণ ইনলাইন শৈলীর সাথে এটিকে স্বচ্ছ করে তোলে যাতে বোতামটির মানটি দৃশ্যমান থাকে।

.button {     
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;        
}

এটি ক্লিক করার পরে এটি একটি সীমানা ছায়া ছেড়ে দেয়।

Comments

এইচটিএমএল সিএসএস অদৃশ্য বোতামের

— ড্রায়ডেন লং

Answer 1

ক্লিক করার সময় রূপরেখা থেকে মুক্তি পেতে যুক্ত করুন outline:none

jsFood উদাহরণ

button {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}

button {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}

<button>button</button>

Comments

এটি আসলে যথেষ্ট ভাল। আমি ইমেজটি ইতিমধ্যে চেষ্টা করেছি এবং এটি ঠিক যেমন প্রয়োজন তেমনই করেছে। আপনাকে অনেক ধন্যবাদ, মিঃ হেইস!

— শিনজি

-webkit-box-shadow: none; -moz-box-shadow: none;

— কোডটিতে

আপনি এটিকে পরিবর্তন করা নিখুত করতে background-color: Transparent; background-repeat:no-repeat;করতেbackground: Transparent no-repeat;

— ফিলিপ Amaral

অনুপস্থিত outline: none;আমাকে প্রতিবার পায়

— অ্যাডাম

Answer 2

সমাধানটি আসলে বেশ সহজ:

<button style="border:1px solid black; background-color: transparent;">Test</button>

এটি একটি ইনলাইন শৈলী করছে। আপনি সীমানাটি 1px, শক্ত রেখা এবং কালো রঙের হিসাবে নির্ধারণ করছেন। এরপরে পটভূমির রঙটি স্বচ্ছতে সেট করা আছে।

---

হালনাগাদ

আপনার বাস্তব প্রশ্নের মতো মনে হচ্ছে আপনি কীভাবে সীমানাকে ক্লিক করার পরে এটি প্রতিরোধ করবেন। এটা একটা সিএসএস ছদ্ম নির্বাচক সঙ্গে সমাধান করা যেতে পারে: :active।

button {
    border: none;
    background-color: transparent;
    outline: none;
}
button:focus {
    border: none;
}

জেএসফিডাল ডেমো

Comments

আপনি এটি ক্লিক করার পরেও একটি সীমানা ছায়া ছেড়ে দেয়। আপনার সহযোগিতার জন্য ধন্যবাদ!

— শিনজি

সুতরাং, আপনার আসল প্রশ্নটি যে আমি প্রতিক্রিয়া জানিয়েছিলাম তার থেকে খুব আলাদা। বোতামটি স্বচ্ছ করতে কীভাবে সিএসএস ব্যবহার করবেন তা আপনি ইতিমধ্যে জানেন। এটি ক্লিক করার পরে, এটি আপনি চান না এমন একটি সীমানা ছাড়ছে। এটা কি সঠিক?

— এনগিমআরএম

হ্যাঁ, আমার প্রশ্নটি যদি বিভ্রান্তিকর হয় তবে আমি অত্যন্ত দুঃখিত।

— শিনজি

Answer 3

একটি ডিভ তৈরি করুন এবং আপনার চিত্রটি (স্বচ্ছ পটভূমির সাথে পিএনজি) ডিভের ব্যাকগ্রাউন্ড হিসাবে ব্যবহার করুন, তারপরে আপনি সেই ডিভের মধ্যে যে কোনও পাঠ্যটি বোতামের উপরে ঘোরাতে প্রয়োগ করতে পারেন। এটার মতো কিছু:

<div class="button" onclick="yourbuttonclickfunction();" >
Your Button Label Here
</div>

সিএসএস:

.button {
height:20px;
width:40px;
background: url("yourimage.png");
}

Comments

আপনি যদি এইচটিএমএল অর্থপূর্ণ এবং অ্যাক্সেসযোগ্য রাখতে চান তবে সিএসএস ব্যবহার করে বোতাম ট্যাগ ব্যবহার এবং পটভূমি ইত্যাদি অপসারণ করা ভাল। তবে এটি ঠিক আছে, বিশেষত এমন পরিস্থিতিতে যেখানে অ্যাক্সেসযোগ্যতা কোনও নেটিভ অ্যাপ্লিকেশনের মতো সমস্যা নয় যা লেআউটটির জন্য এইচটিএমএল 5 এবং সিএসএস ব্যবহার করে, এখানে উদাহরণ দেওয়া আছে: স্ম্যাশিংমাগাজাইন.কম

— 2013/10/17/2

Answer 4

<div class="button_style">
This is your button value
</div>

.button_style{   
background-color: Transparent;
border: none;             /* Your can add different style/properties of button Here*/
cursor:pointer;    
}

Answer 5

এর ব্যাকগ্রাউন্ড চিত্রটি কারও কাছে সেট করাও কাজ করে না:

button {
    background-image: none;
}

Answer 6

** আইকন শীর্ষ বোতামটি যুক্ত করুন **

#copy_btn{
	align-items: center;
	position: absolute;
	width: 30px;
  height: 30px;
     background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}
.icon_copy{
	position: absolute;
	padding: 0px;
	top:0;
	left: 0;
width: 25px;
  height: 35px;
  
}

<button id="copy_btn">

                        <img class="icon_copy" src="./assest/copy.svg" alt="Copy Text">
</button>