CSS3 দিয়ে খুব চমৎকার বাটন ইফেক্ট তৈরি করতে পারেন - প্রিয়লেখা

CSS3 দিয়ে খুব চমৎকার বাটন ইফেক্ট তৈরি করতে পারেন

sakeba
Published: September 18, 2016

After এবং before নিয়ে এর  আগের tutorial এ বিস্তারিত আলোচনা করা হয়েছে । তাই আজ শুধুমাত্র  After এবং Before দিয়ে  কিভাবে বাটন ইফেক্ট বানাতে পারেন  তা দেখানো হবে । একটা বাটন create করে যখন hover করা হবে তখন এর top এবং bottom এ একটা border আসবে । Top Border টি আসবে লেফট থেকে এবং Bottom Border টি আসবে রাইট থেকে। উক্ত বাটন ইফেক্ট টির জন্য প্রয়োজনীয় html css কোড গুলো নিচে দেয়া হল :
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> Creative IT Institute</title>
<style>
.btn{
background-color:#960;
color:#FFF;
margin-top:100px;
margin-left: 100px;
}
.btn{
padding:15px 30px;
position:relative;
text-decoration:none;
color:#fff;
display:inline-block;
}
.btn:after,
.btn:before{
position:absolute;
content:””;
height:5px;
background:#C06;
width:0%;
transition:all 0.3s linear;
}
.btn:after{
top:0;
left:0;
}
.btn:before{
right:0;
bottom:0;
}
.btn:hover:after,
.btn:hover:before{
width:100%;
}
</style>
</head>
<body>
<a href=”#” class=”btn”> Hover This</a>
</body>
</html>

output :

withhovr

একটা  editor open  করে  উপরের code  টুকু  লিখে  file  মেনু  থেকে  Save as এ ক্লিক করে File name:  index.html  দিয়ে save করে ফাইলটি  browser  দিয়ে open করলে output এর  ছবির মত দেখাবে। ধন্যবাদ।