কম্পিউটার টিউটোরিয়াল

CSS দিয়ে ডাউনলোড বাটন স্টাইল করা


উদাহরণ

নিচের কোডটি CSS ব্যবহার করে ডাউনলোড বাটন স্টাইল করার উদাহরণ:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> button{ background-color: rgb(78, 15, 129); border: none; color: white; padding: 12px 30px; cursor: pointer; font-size: 30px; font-weight: bolder; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } button:hover{ background-color: rgb(42, 7, 82); } h1{ text-align: center; } </style> </head> <body> <h1>Download Buttons Styling Example</h1> <h1>Button 1</h1> <button style="margin-left:33%;"><i class="fa fa-download"></i> DOWNLOAD NOW</button> <h1>Button 2</h1> <button style="text-align: center; width: 100%;"><i class="fa fa-download"></i> DOWNLOAD NOW</button> </body> </html>

আউটপুট

উপরের কোডটি নিচের আউটপুটটি তৈরি করবে:

CSS দিয়ে ডাউনলোড বাটন স্টাইল করা

  1. CSS দিয়ে পিল বাটন তৈরি করার পদ্ধতি

  2. CSS দিয়ে সার্চ বাটন তৈরি করার পদ্ধতি

  3. CSS দিয়ে HR এলিমেন্ট স্টাইল করার পদ্ধতি

  4. CSS দিয়ে লেবেল স্টাইল করার পদ্ধতি