I have a "migrated.html" page in root directory. How do I add that link to this CSS style button?
<button onclick="#" Migrated</button>
The above html code didn't work for me.
Here is the link to the code set:
https://codepen.io/prateek-vishwas/pen/Rwwpzjo
There are a few different ways to accomplish this.
But, from what I understand, it sounds like you just want an anchor <a> tag with a href attribute that is styled like this button.
You can simply just set the same class on the anchor tag that is on the button, so you should receive
<a href = "url-to-ur-page" class = glossy-button glossy-button--red>Migrated</a>
Why it has to be a button ? Why not use the normal "A" tag and style him like a button ?
<a href="migrated.html" class="glossy-button glossy-button--red">!!!Migrated!!!
</a>
Works in your codepen - ijust moved the migrated text inside the tag
This will work even without javascript.
Anyhow.the js to change the current url is
window.location = 'your url';
<button onclick="window.location='migrated.html';">
Migrated
</button>
which also work in your pen
Related
Was wondering why when I clicked my button in html it wasn't responding later found out that it will only respond and redirect when I clicked the wording inside "Get Started" was wondering why. This is the code I'm using
<div class="main">
<div class="main__container">
<div class="main__content">
<h1>RAID 2 EARN</h1>
<h2>TECHNOLOGY</h2>
<p>We make it easy!</p>
<button class="main__btn">Get Started</button>
</div>
<div class="imgmain">
<img id="main__img" src="/IMGS/picture1.svg"/>
</div>
</div>
</div>
It is because you're actually clicking the anchor tag inside of the button and the button click doesn't have any actions associated with it. The size of the hyperlink is always only the size of its content. You should change your CSS to style your hyperlink to look like a button. Typically, you can do something like this:
<a class="main__btn" href="raid2earn.html">Get Started</a>
This way you're HTML spec compliant and your hyperlink is styled to look like a button but you're using default browser patterns to complete your action.
Your anchor tag is enclosing only the 'Get Started' text instead of the button. This way, only the text becomes a link
Actually, every html element has a job.
<a> for connecting to outer files
<button> for the inside actions
And you can style everyone as you want.
But:
if you still need to use the button and put the a inside and need to be able to click the button and do the action of the a, there are many many ways, some in html, some in css, and others in javascript.
In html, the easiest solution to your issue is to flip the elements, and make the a outside the button like that:
<a href="#">
<button>Click the button now</button>
</a>
This one is just the easiest.
And there are many others in html and css and javascript.
But again, you must use every element in its own purpose.
Sure you are putting a link tag inside a button because you want a button look and feel. just style your a element the way you want your button to look like as suggested above.
Cheers
so basically I have this button that doesn't work, when I hover over it my cursor doesn't change and when I click it nothing happens, here's the buttons line of code:
<button href="dwr.php" class="dwrbutton fas fa-address-card"> <div class="dwrtext">DWR</div></button>
Href is not a button attribute.
https://www.w3schools.com/tags/tag_button.asp
Use a form with the link as action, or try a <A> tag with styling
add button class to anchor tag
<div class="dwrtext">DWR</div>
If you want to set a href on your button simply wrap it with an anchor element.
Your code should look something like this:
<button href="dwr.php" class="dwrbutton fas fa-address-card">DWR</button>
If you really need to use the button-tag, then you should look here for a solution to your problem. Especially preferred if you need the button-tag within a form.
If you don't care how the link is implemented, then I would personally use an a-tag, which you can then design according to your preferences, also like a button.
Have fun and good luck!
This question already has answers here:
How do I create an HTML button that acts like a link?
(35 answers)
Closed 1 year ago.
I was making my HTML and suddenly my button wouldn't work
<button class="button.hover:links" formaction="Link here">Next</button>
So how to make it work because ever since yesterday it wouldn't work
First I am not sure why you chose the formaction attribute as the destination URL to link there.
The button with the formaction attribute should be working inside <form> tag.
The formaction attribute specifies where to send the form-data when a form is submitted.
The formaction attribute is only used for buttons with type="submit".
If you want a button which link to a URL you should make a button inside the <a> tag.
<a href="your URL"> <button class="your class">HTML here</button> </>
Second, it doesn’t make sense you put a class name as a CSS recognizable string.
You should define CSS independently and import that to use. Or you can use style attribute to set inline CSS.
import "index.css"
<button class="myclass">
...
File index.css
button.myclass:hover{
// Your style
}
If you want to link something to a button, you can do something like this:
<a href="INSERT LINK HERE">
<button class="button.hover:links" formaction="HTML here">Next</button>
</a>
This is the code currently, I've tried adding target="_Blank" but it still opens in the same tab.
We are using WordPress and this is the code we use in the text box for a button to appear.
button color="extra-color-1" hover_text_color_override="#ffffff" size="large" url="https://www.insideeducation.ca/learning-resources/classroom-learning-resources/elementary-school/#flying-animals-scavenger-hunt" text="Flying Animals | Scavenger Hunt"]
did you try anchor tag because i think target attribute works pretty well with anchor
I can't tell you that any of these approaches will work for sure, but there are three methods or workarounds I've thought of that you could try out.
1. Use target="_blank"
I would usually use lower case letters in target attributes. So instead of target="_Blank", you could try target="_blank".
However, this is more likely to be a matter of preference, and I think browsers will most likely accept both of these options.
2. Use some simple javascript
You could use the javascript window.open() function as a workaround for this problem.
Replace target="_Blank" with onclick="window.open('https://www.example.com')" and see if that works any better!
3. Use an anchor tag
At the moment, you seem to be using a button element which looks something like this:
<button color="extra-color-1" ... target="_blank" url="https://...">
Click here!
</button>
You could wrap an a tag around the button and instead apply the target attribute to that. It may be that target attributes work better directly on anchor tags. Here's what it would look like:
<a href="https://..." target="_blank">
<button color="extra-color-1" ... >
Click here!
</button>
</a>
How to embed link-to inside html button tag ?
This is what i have tried -
<button {{link-to "posts.show" post}}>
Show
</button>
Getting Uncought Error: There is no route named
embercli#model:post::ember506:6
You can set the tagName of the link-to to button instead.
{{link-to 'posts.show' post tagName='button'}}
Show
{{/link-to}}