Creative IT Blog Just another WordPress site
Related Articles
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 :
একটা editor open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html দিয়ে save করে ফাইলটি browser দিয়ে open করলে output এর ছবির মত দেখাবে। ধন্যবাদ।
