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 href="https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_image">
<img border="0" alt="W3Schools" src="https://www.w3schools.com/tags/logo_w3s.gif" width="100" height="100">
</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>
<a href="https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_image">
<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>
<a href="https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_image">
<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 id="CssIdForAStyle" href="https://www.w3schools.com/css/css_link.asp">
<img src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" height="42" width="42">
</a>
-------------------------------------------------------------------------------------------------------------LINK CHANGE INTO BUTTON
NEED THREE CSS CODE FOR STYLE BPD
BORDER PADDING DISPLAY
border: solid; padding: 10px; display: inline-block
-------------------------------------------------------------------------------------------------------------
<a href="http://fbgadgets.blogspot.com/2013/12/button-css-examples.html" style=" border: solid; padding: 10px; display:
inline-block; "> LINK 1</a>
<a href="http://fbgadgets.blogspot.com/2014/01/link-change-into-button.html" style=" border: solid; padding: 10px; display:
inline-block; "> LINK 2</a>
<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>
-------------------------------------------------------------------------------------------------------------
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment