How do I make an html link look like a button?
Apply this class to it
.button { font: bold 11px Arial; text-decoration: none; background-color: #EEEEEE; color: #333333; padding: 2px 6px 2px 6px; border-top: 1px solid #CCCCCC; border-right: 1px solid #333333; border-bottom: 1px solid #333333; border-left: 1px solid #CCCCCC;}
<a href="#" class="button">Example</a>
How to make button look like a link?
button { background: none!important; border: none; padding: 0!important; /*optional*/ font-family: arial, sans-serif; /*input has OS specific font-family*/ color: #069; text-decoration: underline; cursor: pointer;}
<button> your button that looks like a link</button>
Creating a Link to Look Like a Button
Just change display: block
under .g2b-button
to display: inline-block
. This is because anchor tags (<a>
) are treated different by the browser than button tags (<button>
).
How do I create an HTML button that acts like a link?
HTML
The plain HTML way is to put it in a <form>
wherein you specify the desired target URL in the action
attribute.
<form action="https://google.com">
<input type="submit" value="Go to Google" />
</form>
If necessary, set CSS display: inline;
on the form to keep it in the flow with the surrounding text. Instead of <input type="submit">
in above example, you can also use <button type="submit">
. The only difference is that the <button>
element allows children.
You'd intuitively expect to be able to use <button href="https://google.com">
analogous with the <a>
element, but unfortunately no, this attribute does not exist according to HTML specification.
CSS
If CSS is allowed, simply use an <a>
which you style to look like a button using among others the appearance
property (it's only not supported in Internet Explorer).
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
color: initial;
}
<a href="https://google.com" class="button">Go to Google</a>
How to make an HTML anchor tag (or link) look like a button?
Using CSS:
.button { display: block; width: 115px; height: 25px; background: #4E9CAF; padding: 10px; text-align: center; border-radius: 5px; color: white; font-weight: bold; line-height: 25px;}
<a class="button">Add Problem</a>
Making a button that's a link in HTML
<a href="#"><button>Link Text</button></a>
You asked for a link that looks like a button, so use a link and a button :-) This will preserve default browser button styling. The button by itself does nothing, but clicking it activates its parent link.
Demo:
<a href="http://stackoverflow.com"><button>Link Text</button></a>
a href link that will act like a button
Do you mean something like this?
<a id="[8]" class="readmore" href="#">
Click here to read more...
</a>
Adapting your javascript to the new "a":
$("a.readmore").click(function() {
var id=this.id.split('[');
var d_id=id[1].split(']');
var ii=d_id[0] $('html, body').animate({
scrollTop: $('[id='+ii+']').offset().top
}, 2000);
return false;
});
Just a tip, your string processing looks terrible, suggestion:
$("a.readmore").click(function() {
var id=this.id.match('[0-9]+');
$('html, body').animate({
scrollTop: $('[id='+ id +']').offset().top
}, 2000);
return false;
});
Ensure this code is being intercept by the page dom parser in the right time,
put it inside a
$(document).ready(function(){ ... });
Regards.
How to design/make an anchor tag look the exact same like a button (very vague, but looks at the details below)
slices off part of the anchor tag when it reaches the
<br>
tag
This can be fixed by applying display:block
to the anchor:
.anchorBTN {
padding: 5px 10px;
background-color: white;
text-decoration: none;
background-color: #EFEFEF;
color: black;
display: block;
}
<b>With display:block:</b><br/>
<a class="anchorBTN">PLACEHOLDER PLACEHOLDER<br/>PLACEHOLDER PLACEHOLDER PLACEHOLDER PLACEHOLDER</a>
<hr>
<b>Without display:block</b><br/>
<a class="anchorBTN" style="display:unset">PLACEHOLDER PLACEHOLDER<br/>PLACEHOLDER PLACEHOLDER PLACEHOLDER PLACEHOLDER</a>
Is it accessible to style button tags to look like links?
For those who stumble across this, please don't use <a>
without an href
, it results in an element that is not longer focusable with the keyboard.
The following fiddle shows this. Try using Tab to focus the links.
You could obviously add tabindex="0"
to add them back to the focus order, but this is an anti-pattern and if you ever find yourself doing this it is an indication that you have made a mistake with your HTML.
<div>
<nav>
<ul>
<li>
<a data-name="Skills">Skills</a>
</li>
<li>
<a data-name="Projects">Projects</a>
</li>
<li>
<a data-name="History">History</a>
</li>
<li>
<a data-name="Employment">Employment</a>
</li>
<li>
<a data-name="Contact">Contact</a>
</li>
</ul>
</nav>
<div id="content-panel">
Home
</div>
</div>
Related Topics
Use Css3 Transitions With Gradient Backgrounds
Difference Between Display: Inline and Display: Inline-Block
Why Does Applying a Css-Filter on the Parent Break the Child Positioning
Change Navbar Color in Twitter Bootstrap
Can Media Queries Resize Based on a Div Element Instead of the Screen
Using Regular Expression in Css
Css Selector That Applies to Elements With Two Classes
How to Apply Multiple Transforms in Css
Text in a Flex Container Doesn't Wrap in Ie11
Stretch and Scale a CSS Image in the Background - With CSS Only
Remove White Space Below Image
Transparent Arrow/Triangle Indented Over an Image
Css - How to Overflow from Div to Full Width of Screen
How to Force Webkit to Redraw/Repaint to Propagate Style Changes