I have a look alike button on my form using <a> like this:
<a target='_blank' href="mailto:email#me.com" style='font-size:15px;padding:8px 12px;text-decoration:none;'>SEND</a>
When hovering on the button you see the email (href). Is there a way to hide that and when hovering show nothing?
Don't put the URL in the href (or keep it href="#") and attach a JavaScript function to the onclick event which puts the actual link in the a element. This way you won't see the actual URL when hovering over the link but the link will be inserted when the user actually clicks.
a {
font-size: 15px;
padding: 8px 12px;
text-decoration: none;
}
SEND
As Yogesh said:
HTML:
<a href='#' id='mailme'>SEND</a>
CSS:
#mailme {font-size:15px; padding:8px 12px;}
JS:
$('#mailme').click(function() {
window.open('mailto:email#me.com');
});
Browsers display the href link you specified (which is OK naturally). But since you don't want it displayed, you should NOT specify the href property in HTML, put it in JavaScript instead - using window.location = href
<a target='_blank' href="#" onclick="window.location = 'mailto:email#me.com'" style='font-size:15px;padding:8px 12px;text-decoration:none;'>SEND</a>
Related
So, I am trying to make an image button that when you click it, it takes you to a website, but I keep getting an underscore on the left side, how could I remove it? And also, do you think it is because I'm putting a button next to another button?
<a style="text-decoration:none;" target="_blank" href="https://www.instagram.com/clairo/">
<img src="https://static.wikia.nocookie.net/clairopedia/images/4/4b/Clairo2020.jpg/revision/latest?cb=20201125212443">
</a>
You should add text-decoration: none; for links in the head tag or the CSS file:
a {
text-decoration: none;
}
I was wondering as to how you could style <a> tags without affecting <button> tags.
a:hover{
text-decoration: underline;
}
<link rel="stylesheet" href="http://mrredblob.com/wordpress/wp-content/themes/homework/style.css">
<button>A link</button>
If you need to use a button like display for an anchor - such that clicking on it should redirect to another page, you could use something like this:
<button onclick="location.href='https://www.google.com'">A link</button>
The onclick event will execute when the user clicks the button, and redirects the user to appropriate page.
You can see it working by pasting the following in a new tab in your browser:
data:text/html;charset=utf-8,<button onclick="location.href='https://www.google.com'">A link</button>
It won't work in the snippets/JS Fiddle due to ~sandbox constraints on snippet's iframe.
Is this what you're looking for?
HTML
<a href="#">
<button>
<span>A link</span>
</button>
</a>`
CSS
span:hover{
text-decoration: underline;
}
The anchor tag's content in your example is a button, and you're trying to set the text decoration of a button, which is not text. The button contains text, but that text is a child of the button, and the button is a child of the anchor. Therefore, the anchor does not have a text value to apply that css property.
Here is an example of what I'm talking about:
HTML
Here is<button>A link</button>Some text
CSS
a:hover{
text-decoration: none;
}
Additionally, you can apply a wrapper class to your anchor to style the child elements:
.wrapper:hover * {
text-decoration: underline;
}
Codepen:
https://codepen.io/foozie3moons/pen/gGRBxZ
Try simply doing this :
<button>A link</button>
This way you can style the text inside of the button however you want.
I found a way of doing it! Here's how:
a:not(button) {
text-decoration: underline
}
I am writing a very simple HTML page for selecting among a few files. The linked-to files are the current an past versions of some data file.
I want the "current" link to be in blue and the "past" links to be in light-blue. This is easily achievable through setting of the font color property in the <A ..> tag.
However, doing so means the color of visited links is not changed to purple.
An alternative is to use link, vlink and alink properties in the <body ...> tag, as explained here.
But doing so means that all links look the same. Apparently, the link, vlink and alink properties do not work when put in the <A ...> tag context.
How can I set a different "visited link" color per link?
You can use a:visited selector for that:
<html>
<style>
a.past:visited {
color: light-blue;
}
a.current:visited {
color: blue;
}
</style>
<body>
<a class="current" href="#">Link</a>
<a class="past" href="#">Link</a>
</body>
</html>
Once the button is clicked I want it to stay with the active style instead of going back to normal style. Can this be done with CSS please? Im using blurb button from DIVI Theme (WordPress). Please help me!
code:
#blurb-hover.et_pb_blurb .et_pb_blurb_content
.et_pb_main_blurb_image .et-pb-icon:hover {
color: red !important; }
#blurb-hover.et_pb_blurb .et_pb_blurb_content
.et_pb_main_blurb_image .et-pb-icon:selected {
background-color: #ff4b46;
color: #fff; }
#blurb-hover.et_pb_blurb .et_pb_blurb_content
.et_pb_main_blurb_image .et-pb-icon:active {
color: white !important;
background-color: red;
width: 140px;
height: 100px; }
CSS
:active denotes the interaction state (so for a button will be applied during press), :focus may be a better choice here. However, the styling will be lost once another element gains focus.
The final potential alternative using CSS would be to use :target, assuming the items being clicked are setting routes (e.g. anchors) within the page- however this can be interrupted if you are using routing (e.g. Angular), however this doesnt seem the case here.
.active:active {
color: red;
}
.focus:focus {
color: red;
}
:target {
color: red;
}
<button class='active'>Active</button>
<button class='focus'>Focus</button>
<a href='#target1' id='target1' class='target'>Target 1</a>
<a href='#target2' id='target2' class='target'>Target 2</a>
<a href='#target3' id='target3' class='target'>Target 3</a>
Javascript / jQuery
As such, there is no way in CSS to absolutely toggle a styled state- if none of the above work for you, you will either need to combine with a change in your HTML (e.g. based on a checkbox) or programatically apply/remove a class using e.g. jQuery
$('button').on('click', function(){
$('button').removeClass('selected');
$(this).addClass('selected');
});
button.selected{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Item</button><button>Item</button><button>Item</button>
We're going to to be using a hidden checkbox.
This example includes one "on click - off click 'hover / active' state"
--
To make content itself clickable:
HTML
<input type="checkbox" id="activate-div">
<label for="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
</label>
CSS
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked ~ label
.my-div{background-color:#000}
To make button change content:
HTML
<input type="checkbox" id="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
<label for="activate-div">
//MY BUTTON STUFF
</label>
CSS
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked +
.my-div{background-color:#000}
Hope it helps!!
In the Divi Theme Documentation, it says that the theme comes with access to 'ePanel' which also has an 'Integration' section.
You should be able to add this code:
<script>
$( ".et-pb-icon" ).click(function() {
$( this ).toggleClass( "active" );
});
</script>
into the the box that says 'Add code to the head of your blog' under the 'Integration' tab, which should get the jQuery working.
Then, you should be able to style your class to what ever you need.
The first example didn't work. I need to have always a list to disable links? Or what is wrong with my first demo?
<a class="disabled" href="#">Disabled link</a>
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled">Disabled link</li>
...
</ul>
https://jsfiddle.net/7y0u2amy/
I think you need the btn class.
It would be like this:
<a class="btn disabled" href="#">Disabled link</a>
It seems that Bootstrap doesn't support disabled links. Instead of trying to add a Bootstrap class, you could add a class by your own and add some styling to it, just like this:
a.disabled {
/* Make the disabled links grayish*/
color: gray;
/* And disable the pointer events */
pointer-events: none;
}
<!-- Make the disabled links unfocusable as well -->
Link to disable<br/>
Non-disabled Link
I just created my own version using CSS. As I need to disabled, then when document is ready use jQuery to make active. So that way a user cannot click on a button until after the document is ready. So i can substitute with AJAX instead. The way I came up with, was to add a class to the anchor tag itself and remove the class when document is ready. Could re-purpose this for your needs.
CSS:
a.disabled{
pointer-events: none;
cursor: default;
}
HTML:
<a class="btn btn-info disabled">Link Text</a>
JS:
$(function(){
$('a.disabled').on('click',function(event){
event.preventDefault();
}).removeClass('disabled');
});
If what you're trying to do is disable an a link, there is no option to do this. I think you can find an answer that will work for you in this question here.
One option here is to use
123n
Disabled href tag
You cant set links to "disabled" just system elements like input, textfield etc.
But you can disable links with jQuery/JavaScript
$('.disabled').click(function(e){
e.preventDefault();
});
Just wrap the above code in whatever event you want to disable the links.
I just removed 'href' attribute from that anchor tag which I want to disable
$('#idOfAnchorTag').removeAttr('href');
$('#idOfAnchorTag').attr('class', $('#idOfAnchorTag').attr('class')+ ' disabled');
Thanks for #jacob-van-lingen's comment, You can extend .btn-link in your global style
a.disabled{
#extend .btn-link
}
I developed the following solution because when I apply class styles such as btn disabled offered by Bootstrap 5 to an <a> element inside a card, margin and padding are applied to the element:
.disabled {
color: currentColor;
cursor: not-allowed;
opacity: 0.5;
text-decoration: none;
}
Disabled Link
I liked the answer by Sercan and I added a tiny jQuery to it, so that the links are also not followed on click:
$(document)
.on("click",
"a.disabled",
function () {
return false;
});
and for the look from the Answer above:
.disabled {
color: currentColor;
cursor: not-allowed;
opacity: 0.5;
text-decoration: none;
}