HomeAll PostHTMl, CSS ব্যবহার করে অসাধারণ এনিমেশন বাটন তৈরি করুন আপনার ওয়েবসাইটের জন্য।
Advertice Space with sell

Contact With facebook

HTMl, CSS ব্যবহার করে অসাধারণ এনিমেশন বাটন তৈরি করুন আপনার ওয়েবসাইটের জন্য।

আসসালামু আলাইকুম

আশা করছি আল্লাহ তায়ালার অশেষ রহমতে আপনারা সবাই ভাল আছেন । আমিও আল্লাহ তায়ালার অশেষ রহমতে ভাল আছি এবং সুস্থ আছি আলহামদুলিল্লাহ ।

আজকে আমি দেখাবো কিভাবে এইচটিএমএল সিএসএস ব্যবহার করে অসাধারণ এনিমেশন বাটন তৈরি করবেন আপনার ওয়েবসাইটের জন্য।

টিউটোরিয়ালটি শুরু করার আগে:

যারা এইচটিএমএল সিএসএস কি জানেন না এবং কিভাবে এগুলোর প্রয়োগ করতে হয় তাও জানেন না তারা দয়া করে ইউটিউব থেকে এ বিষয়ে ভিডিও দেখে আসুন। অন্তত বেসিক জ্ঞান অর্জন করুন আর যারা অলরেডি জানেন তারা পোস্টটি দেখতে থাকুন।

Button Demo:

Click Here

HTML For This Button:

<div class=”container”>
<a href=”#”>
<span></span>
<span></span>
<span></span>
<span></span>
Button
</a>
</div>

CSS For This Button:

body {
margin: 0;
padding: 0;
background: #0c002b;
font-family: sans-serif;
}

a {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #1670f0;
padding: 30px 60px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
overflow: hidden;
}

a:before {
content: ”;
position: absolute;
top: 2px;
left: 2px;
bottom: 2px;
width: 50%;
background: rgba(255, 255, 255, 0.05);
}

a span:nth-child(1) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, #0c002b, #1779ff);
animation: animate1 2s linear infinite;
}

@keyframes animate1 {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}

a span:nth-child(2) {
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(to bottom, #0c002b, #1779ff);
animation: animate2 2s linear infinite;
animation-delay: 1s;
}

@keyframes animate2 {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
}

a span:nth-child(3) {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to left, #0c002b, #1779ff);
animation: animate1 2s linear infinite;
animation-direction: reverse;
}

a span:nth-child(4) {
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(to top, #0c002b, #1779ff);
animation: animate2 2s linear infinite;
animation-direction: reverse;
animation-delay: 1s;
}

Thanks For Watching This Post..

The post HTMl, CSS ব্যবহার করে অসাধারণ এনিমেশন বাটন তৈরি করুন আপনার ওয়েবসাইটের জন্য। appeared first on Trickbd.com.

Source:

About Author (1515)

This author may not interusted to share anything with others

Leave a Reply

Related Posts

Switch To Desktop Version