CSS Links | Styling Links With CSS | HTML CSS Buttons Design

Home / Answer

CSS Links | Styling Links With CSS | HTML CSS Buttons Design

Author S M Al Aman | Asked on 2022-12-10 | • HTML, CSS

Could anyone show me some tutorials that make a button in CSS and doesn't require images? 

 

HTML link tags, hyperlinks

authorAkif Hossain replied on 2022-12-10

just write CSS accordingly! Here's a kickoff example that makes a link look like a button:

Sample One: 

HTML:

<div class="button1">    
    <a href="default.html">This is a link</a>
</div>

CSS:

.button1{
    margin-bottom: 17px;
}
.button1 a {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
   display: inline-block;
 }
.button1 a:hover{
  background-color: green;
  color: white;
}

 

Sample 02:  

HTML

<div class="button2">    
    <a href="default.html">This is a link</a>
</div>

CSS 

.button2 a {
    background-color: #b10808;
    color: white;
    border: 4px double #610404;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
 }
.button2 a:hover{
  background-color: white;
  color: black;
}

উত্তর দেওয়ার জন্য আপনার অ্যাকাউন্ট টি লগইন করতে হবে

Do you want to get the latest update?