im new to HTML and im just trying to edit a template at the moment. A Sign Up button on an unordered list has thrown me.
Heres some info:
On the template i had to change the link to a form button in order to integrate it opening up a part of the account system... After i placed the form button there it turned out like this:
https://gyazo.com/82c807d59162ada63dcaeea69b2fd340
The old code looked like this:
<li>Sign Up Now!</li>
And the new code looks like this:
<li><button type="button" class="order-button" data-product="1" >Sign Up Now!</a></li>
I also had to insert this into the footer in the code to integrate it:
<script type="text/javascript" src="#"></script>
I've taken the links out just for anonymity.
Also the bottom part of the list where it now says "Sign Up Now!" is supposed to be green and then turn to black on the mouseover.
The CSS files from the template are quite extensive though and the section with all of the .btn CSS parts is just a long unstructured list thats hard to make sense of. And on top of that i cant work out how to link the form button to the .btn part of the CSS.
Thanks in advance for any help :)
Your markup has an incorrect closing tag for <button>. It should be:
<li><button type="button" class="order-button" data-product="1" >Sign Up Now!</button></li>
One alternative is to add your custom css at the end of the CSS file.
Thay way you could add this class:
.order-button{
/* Styles for button here */
}
.order-button:hover{
/* Styles for mouseover here */
}
Related
This question already has answers here:
Anchor or Button in React SPA?
(3 answers)
Closed 9 months ago.
I see a lot of discussion on the internet about <a> tags that look like buttons, and rules that all links must obey. However, I am confused about <button> tags that are styled to look like links.
I am creating a single-page-app and my navigation component is responsible for rendering / hiding different sections of the website. Only one section would be visible at a time, so I'm treating each section as if it was a unique page with its own route.
My navigation controls are buttons, instead of links. I did this because there is nothing valid that I'm aware of, which I can put inside the hrefs (given that the hidden content is not present in the DOM).
I read on the internet that buttons must have styling to identify the priority of the button, for accessibility reasons. Ideally, I want the buttons to look like links since they behave similarly to links (although not identical).
Are there any accessibility concerns with styling buttons to look like links? Would it make more sense to style these buttons as buttons? If they should look like buttons then what should be the priority? Does it make more sense just to hide the hidden "pages" with css, so that I can turn the buttons into <a> tags and add an href?
Here is the typical markup for single page apps
<div>
<nav>
<ul>
<li>
<button data-name="Skills">Skills</button>
</li>
<li>
<button data-name="Projects">Projects</button>
</li>
<li>
<button data-name="History">History</button>
</li>
<li>
<button data-name="Employment">Employment</button>
</li>
<li>
<button data-name="Contact">Contact</button>
</li>
</ul>
</nav>
<div id="content-panel">
Home
</div>
</div>
The part at the bottom div#content-panel represents the Home page. It will be replaced with the other pages using JavaScript, which will contain the main content of the website.
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>
If you are building a SPA in a fashion similar to that described by the OP you should still be using anchors <a> for navigation.
There are a few things you should consider:
When each section is shown you should update the URL on the site via JavaScript.
If your site also has Server Side Rendering (SSR) and can function in a limited fashion without JavaScript (recommended as JavaScript does fail more often than you think due to network errors, JS errors for certain scenarios you missed etc. etc.) then the href of the anchors should point to the correct URL.
On SPA navigation it is recommended that once the new page is loaded you programatically set focus on that pages <h1>. You can do this by adding tabindex="-1" to the <h1> (which allows it to receive focus programatically without being added to the focus order of the page) and then using header1.focus()
For an even better experience for people who use a screen reader it may also be beneficial to add an aria-live section to the page with the value of assertive that announces "loading" once a link is clicked. <div aria-live="assertive"><!--add "loading" here programatically when the link is clicked, remove it once the page has loaded--></div>
I have a reasonably long answer with a bit more detail of this technique here that explains why.
To answer the original question finally!
You can style a button to look like a link. However consistency across a site is key.
So make sure that if that is the styling you use for buttons that the majority of buttons look the same.
Also if you make a button look like a standard link then really you should make your links look different to your buttons styled as links.
This avoids confusion as a button has the expectation it will change something on the current page or submit a form, a link has the expectation of changing the page / URL / navigation.
However the advice is not quite the same for a link styled like a button. It has become acceptable that links can be styled like buttons if they are a Call To Action for example. Yet again though, consistency across a site is key for a great user experience.
As stated on MDN Navigation expects to have a links as children. So if you want to prevent any accesibility issue, I suggest you to stick to them, just remove the href attribute and add a type="button" to your a tags.
Anything that looks like something else fools the user. This applies to a link looking like a button, a link looking like plain text, an h1 looking like an h2, a ul looking like an ol, etc. When the user is fooled, the user can get confused or be misled into errors. With a link that looks like a button, for example, the user may press Space to activate it and be surprised to find that it is not activated, but instead the page is scrolled.
Well the real reason i need to know this is due to the working of my modal
In my modal's JavaScript code , its defined to trigger open modal window only when the class is "modal-button"
let open_modals = [];
$(function() {
// Get the button that opens the modal
// read all the control of any type which has class as modal-button
var btn = document.querySelectorAll(".modal-button");
Below is the html code which works perfectly along with this
<!-- Trigger/Open The Modal -->
Click Me
Although i want the text "Click Me" to not inherit the properties of class "modal-button" but still have that class ,so modal opening functionality is not broken. Hence i tried something like this...
<!-- Trigger/Open The Modal -->
<div class="modal-button">
<span class="text">Click Me</span>
</div
But it is breaking the modal opening functionality probably because the text-"Click Me" is not inhereting class "modal-button" due to the span tag
Hence i think i have to find an alternative of span tag for styling inline elements
Hopefully someone can give me a better approach to this
Thanks in advance
There's nothing stopping you from having two classes on the same element like this:
Click Me
The second class listed will take priority over the first for styling, but the element will still be found by any CSS query that looks for the first class.
I am having trouble getting my mailto link working on this landing page. I have been googling and still have not found an answer why a simple mailto link is not working using Bootstrap.
I am trying to get the "Contact us" link in the top right menu to open a mail window and the "Refer now" link needs to go to an anchor tag lower in the page, code below. Webpage can be viewed at: website code
<div class="col-xs-10 text-right menu-1 main-nav">
<ul>
<li class="active">BENEFITS</li>
<li class="active">REQUIREMENTS</li>
<li class="active">CONTACT US</li>
<li><input type="submit" class='contact-button' value="REFER NOW" onclick="window.location.href='mailto:surveyorhr#carf.org'"></li>
<!-- For external page link -->
<!-- <li>External</li> -->
</ul>
</div>
Any help would be appreciated.
It seems strange to use an input type submit button for a mail link – those certainly are not made for mail links – apart from that any submit button would only work in the context of a form, i.e. inside a form element.
I would recommend to use a regular link and style it as a button using CSS.
(BTW: This has nothing to do with Bootstrap)
Currently you have some js running in main.js that is manipulating click events and preventing default browser behavior. If you remove the class "main-nav" from the div that contains your mailto link it begins to function again. Based on that I would revaluate your use cases in that js file.
I basically want an image as a button, for example, see the 'recent inbox messages' thing at the top next to stack Exchange? I want to recreate that moreorless but with my own image.. How would I go about doing this, I've tried:
<button type="button" name="test">
<img src="C:/Trey/rs-logo.jpeg">
</form>
but that didn't work, could anyone help (sorry if I worded all of this badly, English [though my native language] isn't a strong point!
-Trey
You can make an image button with something like this:
<a href="#">
<img src="yourImage.png">
</a>
This creates an image element with an anchor surrounding it, so for all intents and purposes, it's an "image button." You will have to style it to your liking.
UPDATE
Your code will also work if you change it to
<button>
<img src="yourImage.png">
</button>
You have to close the button tag. This will create an ugly-looking button with an image in it, but you can use CSS to style it to your liking.
you are opening a button and closing a form which is not even opend yet
you should use in first place. how ever using an image as a button is not the best idea i guess
<button type="button" name="test">
<img src="C:/Trey/rs-logo.jpeg"/>
</button>
made you a quick fiddle to check it out: http://jsfiddle.net/T2JRt/1/
I'm new to jQuery Mobile and I'm trying to figure out how exactly to customize buttons. Which classes do i have to use to access certain css properties?
For instance I know that if you want to change the background color of a button you write .ui-btn-inner {background: white;}. But when I do it this way it doesn't work out all the time.
I already looked on the jQuery Mobile API website but I can't seem to find anything that really explains this concept in depth.
If someone could provide me with a website or an explanation about these classes that would be much appreciated.
You can inspect the html to see what jQuery mobile buttons look like.
For a basic button, created by:
Link button
the output looks like:
<a href="index.html" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Link button</span>
</span>
</a>
Create and load a custom CSS file after the jQuery mobile css.
Here you can override individual css classes, like
.ui-btn-inner {
// !important does the trick
background-color: #FF0 !important;
...
}
You sometimes might have to add !important to the css in order to override jQuery mobiles CSS. But I actually do not know when this is necessary, I just do it if it does not work without...
You can look up the structure of all elements in the jQuery mobile CSS, or, as i mentioned before, use the web inspector to see what jQuery turns your markup into.
PS
A more in-depth look at how the CSS works, is provided here