Tuesday, May 23

Convert any link into button

Convert any link into button

hyperlink, or simply a link, is a reference to data that the reader can directly follow either by clicking or tapping A hyperlink points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks. The text that is linked from is called anchor text. You can click on a link and jump to another document. When you move the mouse over a link, the mouse arrow turns into a little hand.

Using CSS (Cascading Style Sheet) any link can be convert into button with two lines of codes. Depending on your choice you can easily setup button color , border , link color etc.

In html a link looks like <a href="http://www.livthreads.com/">LiveThreads</a> where <a> tag is used for including link within href="" and link text is putted in between the <a> tag.

How to covert link inti button with CSS ?

Step1: Add below CSS to your style-sheet once. In Blogger add them before ]]></b:skin> in your html and in wordpress go to customization tab to add CSS.

.btn{background:#c10707;border:1px solid #c10707 ;padding:3px;color:white !important;border-radius:6px;}.btn:hover{box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);background:#ff0000;text-decoration:none;}

Customization: Change Red background hex value to change button color before hover and on hover. Change blue text to change border width type and color. Change Green text to change in button text color.

Step2: Now add class='btn' to every link html after < a to convert it into button.

Example: <a class='btn' href="http://www.livthreads.com/">LiveThreads</a>