LINK CHANGE INTO BUTTON

Thursday, 16 January 2014

LINK CHANGE INTO BUTTON

----------------------------------------------------------------------------------------------------
CHANGE ANY LINK INTO BUTTON
-----------------------------------------------------------------------------------------------------

/*****************************************
Global Links CSS For Blogger Template
******************************************/
a{ color: #4690B3; outline:none; text-decoration: none; }
a:hover { color: #3e3e3e; text-decoration:none; }

/*****************************************
Or Use This Global Links CSS For Blogger Template
******************************************/
body#layout #menu,body#layout .page-title,#navbar,.date-header,.feed-links,#credit,.post-location,.post-share-buttons,.post-icons{display: none !important;}
.section,.widget,.widget-content,body,h1,h2,h3,h4,h5,ul,li,a,p,span,img,dd{margin:0;padding:0;list-style:none;text-decoration:none;outline:none}

--------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
---------------------------------------------------------------------------------------------------

<html>
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
<title>Link Change Into Button </title>
<style>
/*Step 1: Basic Button Styles*/
.button {
display: block;
height: 100px;
width: 300px;
background-color:Red;
}
/*Step 3:Button Text Writing Link Style*/
a.button {
color:Green;
text-decoration: none;
text-align: center;
font: bold 3.2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
</style>
</head>
<body>
<a href="http://fbgadgets.blogspot.co.uk/" class="button">Click Me</a>
</body>
</html>

--------------------------------------------------------------------------------------------------
YOU CAN WRITE ABOVE BUTTON AND LINK CSS CODE IN THIS WAY
HOW TO WRITE BUTTON AND LINK CSS CODE TOGETHER
--------------------------------------------------------------------------------------------------
a.button {
/*Step 1: Basic Button Styles*/
display: block;
height: 100px;
width: 300px;
background-color:Red;
/*Step 3:Button Text Writing Link Style*/
color:Green;
text-decoration: none;
text-align: center;
font: bold 3.2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

----------------------------------------------------------------------------------------------------------
UPPER CODE WITH POST TITLE WITH AUTO READ MORE LINK
----------------------------------------------------------------------------------------------------------
OR USE DISPLAY BLOCK FUNCTION IN CSS CODE WHICH CHANGE POST
TITLE INTO LINK NO ADD ONLY RED LINE
.post h3 a {
/*Display Block Function Post Title Into Link*/
display:block;
color: #000000;
text-decoration: none;
}

---------------------------------------------------------------------------------------------------
SRC IMAGE HEIGHT WIDTH EXAMPLE IN BLOG
---------------------------------------------------------------------------------------------------
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='Popular Posts' class='icon-action' height='18' src='http://www.blogger.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
-------------------------------------------------------------------------------------------------------------
IMAGE CHANGE INTO BUTTON
A TAG LINK ON IMAGE TAG
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_image
https://fbgadgets.blogspot.com/2018/09/padding-change-into-width-and-height.html
-------------------------------------------------------------------------------------------------------------

<html>

<head>

<title>IMAGE CHANGE INTO BUTTON </title>

<style>

</style>

</head>

<body>

</a>

</body>

</html>

-------------------------------------------------------------------------------------------------------------
IMAGE CHANGE INTO BUTTON WITH CSS IMAGE
--------------------------------------------------------------------------------------------------------------

<style>

img{

background-image: url("https://www.w3schools.com/tags/smiley.gif");

height:42px;

width:42px;

position: absolute;

}

</style>

<img>

</a>

---------------------------------------------------------------------------------------------------------------
LINK CHANGE INTO BUTTON
A TAG LINK ON BUTTON TAG
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_image
-------------------------------------------------------------------------------------------------------------

<html>

<head>

<title>LINK CHANGE INTO BUTTON </title>

<style>

</style>

</head>

<body>

<button>CLICK ME</button>

</a>

</body>

</html>

-------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
ReadMore:
https://www.w3schools.com/css/css_link.asp
--------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------
CODE:1
--------------------------------------------------------------------------------------------------------------
<style> a{color: hotpink;} </style>
<a href="default.asp" target="_blank">This is a link</a>
--------------------------------------------------------------------------------------------------------------
CODE:2
--------------------------------------------------------------------------------------------------------------
<style>
a{
background-color:White;
border-style: solid;
border-color: Black;
color: BLack;
padding: 14px 25px;
text-decoration: none; /*REMOVE UNDER LINES TEXT */
display: inline-block; /*GIVE TOP SPACE LIKE MARGIN */
}
</style>
<a href="default.asp" target="_blank">This is a link</a>
-------------------------------------------------------------------------------------------------------------
WHEN USE A DIV USE CSS ID AND USE IMAGE LINK
https://www.w3schools.com/cssref/pr_class_cursor.asp
-------------------------------------------------------------------------------------------------------------
<html>
<style>
b{
border:solid black;
padding: 10px;
display:inline-block;
color:red;
background:yellow;
border-style:double;
cursor: pointer; /*it show hands on button */
}
</style>
<body>
<b>NEW URDU WORD FROM ENGLISH</b>
</body>

</html>
-------------------------------------------------------------------------------------------------------------

<style>

#CssIdForAStyle{

color:Black;

background-color:White;

text-decoration:none; /*REMOVE UNDER LINE FROM TEXT */

/*GIVE BORDER AROUND TEXT USE BORDER STYLE AND COLOR */

border-style:solid;

border-color:Black;

/*KEEP TEXT IN CENTER IN BOX USE PADDING DISPLAY */

padding:16px 32px;

display:inline-block;

}

</style>

</a>

-------------------------------------------------------------------------------------------------------------
LINK CHANGE INTO BUTTON
NEED THREE CSS CODE FOR STYLE BPD
BORDER PADDING DISPLAY
border: solid; padding: 10px; display: inline-block
-------------------------------------------------------------------------------------------------------------

<a href="https://www.youtube.com/watch?v=150RVuS_kAM" style=" border: solid; padding: 10px; display: inline-block; ">LINK CHANGE INTO BUTTON IN HTML - YouTube</a>

-------------------------------------------------------------------------------------------------------------