What is a custom HTML code for having a link (say abc123.com) which is of certain size and color and which opens in a new/blank tab.
Have tried blank standalone with link but need to know how to change the size and font color of the the link word "SUBMIT"
Ok, so what you need is to use the anchor tab which is In this to put the url is to use the href attribute and then the url. To chance the color and size and all of that would require you to have a class or id for the link. Then using CSS, you could format this link. use the color tag to change text color, and font-size to change the font size. For example, this is what I would do.
<style>
.link {
color: blue;
font-size: 30px;
}
</style>
Submit
Or, if that isn't what you want, you could try using a button and then an onclick function that opens a new link in a new tab. Try this code :
function submit() {
window.open('abc123.com');
}
<style>
.submit-button {
outline: none;
border: none;
background-color: transparent;
color: blue;
font-size: 40px;
}
.submit-button:hover {
text-decoration: underline;
}
</style>
<button class="submit-button" onclick="submit()">Submit</button>
Related
So I am trying to make a button but I don't like it having a blue underline and blue text when I make it a link button, here's the code:
<a class="button" href = "howtomakebread.html"> how to make bread!</a>
</div>
</div>
div.breadbutton {
background-color: black;
width: 150;
height: 25;
text-align: center;
margin: 10px;
margin-top: 10px;
padding: 10px;
color: white;
position:relative; top:-10px
}```
That is the code itself, comment if I need to supply more of my code to fully answer this, thanks!
The CSS property to remove underline is: text-decoration: none; and to make it not have blue text, simply set the color in CSS to any other color: color: white;. To use an rgb code: color: rgb(255, 255, 255);, and to use HEX: color: ffffff;
There are quite a few issues with your code example.
The class name "breadbutton" does not exist, your code has only the class "button"
The CSS properties "height" and "width" should end in a measurement type: "150px"
To address your question more directly though, the CSS property to remove the underline is "text-decoration". In your example I'd use text-decoration: none;
Here is a code example with some modifications to do what I think you're intending.
https://jsbin.com/qiyobimehe/edit?html,css,output
You can simply do this: <a class="button" href = "howtomakebread.html" style = "text-decoration: none; color: black;"> how to make bread!</a>
But what you are making is a link not a button. If you one a make one use the button tag
<button type="button" href = "howtomakebread.html" style = "text-decoration: none; color: black;"> how to make bread!</button>
If you want to use a css file I recommend you make a separate css and call it in the head of your html.
Your html <button class="yourbutton" type="button" href = "howtomakebread.html" > how to make bread!</button>
your css
.yourbutton {
text-decoration: none;
color: black;
}
I currently have a tel link on my site:
HTML
Give us a call today on 01234123456
CSS
a[href^="tel:"] {
font-size:12px;
font-color:white;
}
The only problem is that on another page I have the telephone number showing as part of some text and I need to show the tel number on this page in black and I am not sure how I override this?
Any ideas?
Simple answer: add an specific class to this phone container.
<a class="phone-green" href="tel:+441234123456">01234123456</a>
Then add a class modifier in css file:
a[href^="tel:"].phone-green {
font-size: 12px;
color: white;
}
Use color: attribute instead of font-color:.
I would go like this :
a {
font-size:12px;
color: #FFF;
}
You should give a class to your a tag, like this :
<a class="phone-number">+4412666666</a>
in order to assign a color to this specific class, like this :
a.phone-number {
font-size:12px;
color: #FFF;
}
Good luck !
I have a webpage with a table. If a user logs in, they can click on the row headers to enter the edit page. To make the printed version look the same for both logged in and not logged in users, I use CSS to style the link as regular text.
The problem is, that the Save as PDF feature in chrome saves the links with their href, making them open a webpage if clicked on in the saved pdf. Is there any way, to remove this href during this 'print', other than the obvious way of having two elements and showing only the clickable one in #media not print and showing only the non clickable one in #media print?
I prefer not using JavaScript to change the href during printing.
You can use pointer-events, see here the browser compatibility for that http://caniuse.com/#search=pointer-events . It will disable your link.
#media print {
a {
pointer-events: none;
color: #000;
text-decoration: none;
}
}
use like this remove anchor tag and put div...like
<style>
#d:active {
load-url: (http://google.com/
}
</style>
<div class="click" id="d" >
</div>
You can use the onclick attribute to open the edit page:
<th onclick="location.href='?edit=ID'">Item #1</th>
To style it as a link, use the th[onclick] CSS selector:
#media not print {
th[onclick], td[onclick] {
color: #00e;
text-decoration: underline;
cursor: pointer;
}
}
i just started programming and I wanted to try css with html. However, I keep running into errors like these where I want a button, however when displayed on browser the said button becomes a link.
can someone explain?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Linking External Style Sheets</title>
<style>
h1 {
color: blue;
}
a {
color: blue;
text-decoration: none;
}
a:hover {
background-color: yellow;
}
</style>
</head>
<body>
<div><p><em>Click here:</em>
<a class="w3-btn" href="http://www.w3schools.com">Link Button</a>
</div>
</body>
</html>
I wanted to give it a border, background and text color also, and make it change when theres a mouse over it with the code...
If you want a button then simply use <button> instead of <a>:
<button class="w3-btn" href="http://www.w3schools.com">Link Button</button>
However, you can't use href with a button since buttons are suited for forms. In this case you can either style the link to look like a button (#RahulB answer) or wrap the (real) button in a form which submits to http://www.w3schools.com.
<form action="http://www.w3schools.com" method="POST">
<button class="w3-btn" type="submit>Link Button</button>
</form>
You can style the link as button --
a{
color: blue;
text-decoration: none;
border : 1px solid black;
padding : 10px;
background-color : cyan;
border-radius: 10px;
appearance : button;
}
Fiddle link : https://jsfiddle.net/vgwgsoqt/1/
I have a button in my webpage with below code -
HTML:
<button type="submit" class="checkout-button" id="checkout-button" name="checkout-button"></button>
CSS:
.checkout-button{
width: 130px;
height: 35px;
background: url('../poc2/images/checkout.png') no-repeat;
border: none;
vertical-align: top;
margin-left:35px;
cursor:pointer;
}
Now, the button works fine as I can click on it and have my corresponding php code run; the pointer turns into the hand symbol letting the user clearly know that it is clickable and that its a button.
What I would like to do is to modify the behavior of this button based on some conditions. Example pseudocode:
if flag=1:
/* enable the button, and let the user click it and run the php code */
else:
/* display this button, but don't let any actions take place if the user clicks on it; */
How do I code this enable-disable logic for the button? Basically, I want the button to work as a button under normal situations; and just as a picture without any hyperlink under certain other situations.
You can either do this without JavaScript (requires a page refresh) or with JavaScript and have no refresh.
Simply use the disabled attribute:
<button type="submit" class="checkout-button" id="checkout-button" name="checkout-button" disabled="disabled"></button>
And create a css style for it, if necessary. The example below shows a JavaScript solution. If the variable disableButton is set to true, the button will be disabled, else it can be clicked:
const disableButton = true; //change this value to false and the button will be clickable
const button = document.getElementById('checkout-button');
if (disableButton) button.disabled = "disabled";
.checkout-button {
width: 130px;
height: 35px;
background: #333;
border: none;
vertical-align: top;
margin-left: 35px;
cursor: pointer;
color: #fff;
}
.checkout-button:disabled {
background: #999;
color: #555;
cursor: not-allowed;
}
<button type="submit" class="checkout-button" id="checkout-button" name="checkout-button">submit</button>
You can do it either by modifying the attribute or by adding/removing a class.
Modifying attribute
You will want to switch between <button disabled="true"> and <button disabled="false">
With javascript, it could look like this:
if flag=1:
document.getElementById("your-btn").disabled = true;
else:
document.getElementById("your-btn").disabled = false;
And with jquery, like this:
if flag=1:
$('#your-btn').prop('disabled', true);
else:
$('#your-btn').prop('disabled', false);
Adding/removing class
Add the following css:
.btn-disabled{
cursor: not-allowed;
pointer-events: none;
}
And add/remove a class to the button.
With jquery:
if flag=1:
$('#your-btn').addClass('btn-disabled');
else:
$('#your-btn').removeClass('btn-disabled');
If you don't want jquery, but pure javascript, here is how to do it.
If your circumstance allows you could just remove the content in the action attribute from the form tag. Therefor when a user clicks submit, no action is taken.