Creating buttons in html with Anchor & Icons

There are two ways to creating buttons in HTML with Anchor and Icons, But we must learn how to create button in HTML, then learn how to add link and icon with material-icon or font-awesome

Creating buttons in html with button tag

To create button in HTML with beautiful style write this code bellow:

 <style>
button {box-shadow: 0; background: #ffd400; border: 0px; margin: 3px;cursor: pointer;transition:0.75s;}
button:hover {background: #0395c1;color: white;0.75s;}
</style>
  
<button> Write any thing </button>

Creating buttons with anchor

 <button><a href="www.exemple.com/article"> Write any thing </a> </button>

Note:you can add style for anchor tag for exemple color of text, hover color, textdecoration by using css.

Creating buttons in html with icon

There are many symbols that you can use within the HTML button, these symbols express something (download link, external link ...)
Icons are generally used to perform a JavaScript function from the attribute onclick = "function", as the JavaScript functions works when the button is pressed directly.

 <button onclick="fun()">click me</button>
<script>
function fun(){
  alert("thank you")
}
</script>

We will use two sources to create icon in HTML

1-Font-awesome

1- add in your website or blog template this link to run font icon.

2- choose the icon that you want use in button.

3- you find the code in official website of font awesome

 
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <style>
      i.fa.fa-download{vertical-align:middle} i.fa.fa-download:hover{transform:rotate(360deg); transition:0.5s}
      a{color:white; text-decoration:none} button{background:red; border:0px; border-radius:3px; }
      
    </style>
   <button>
        <a href="#">Download <i class="fa fa-download"></i> </a>
    </button>

2-Material-icon

 <head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  </head>
  <style>
      .material-icons{vertical-align:middle} .material-icons:hover{transform:rotate(360deg); transition:0.5s}
      a{color:white; text-decoration:none} button{background:red; border:0px; border-radius:3px; }
      
    </style>
   <button>
        <a href="#">Download <i class="material-icons">file_download</i> </a>
    </button>

Creating buttons in html with input tag

 <input type="button" value="write any word"/>

note:in input tag cannot add link, but you can run JavaScript function with attribute onclick="function". Creating buttons in html with Anchor & Icons

Creating buttons in html with Anchor & Icons

☷✎

Creating buttons in html with Anchor & Icons

Creating buttons in html with button tag

Creating buttons with anchor

Creating buttons in html with icon

1-Font-awesome

2-Material-icon

Creating buttons in html with input tag

Comments

Post a Comment

Meta keywords generator tool for Blogger

JSON LD code generator - json ld product

How-to display text on hover with CSS style (Tooltips)

Create direct download link for google drive file online

blogger meta description generator