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/
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 have virtually zero experience with HTML and CSS, and I'm trying to create a simple website.
I have buttons from Bootstrap, what I'm trying to achieve is, when a button is pressed, it's text would change it's color and will have no border.
This is what I tried:
.btn-secondary:active, .btn-secondary:focus {
color: aquamarine;
outline: none !important;
}
But that does not work.
This is the result:
The change in color does work, but I just can't remove this grey border. I tried looking in Bootstrap docs, but couldn't find anything.
Tried few different things too (such as outline-style etc.) but still, it remains the same.
Try border style like below code -
.btn-secondary:active, .btn-secondary:focus, .btn-secondary:hover {
color: aquamarine;
border: 0 !important;
}
You can use:
.btn-secondary:active, .btn-secondary:focus {
color: aquamarine;
outline: 0;
-moz-outline-style: none;
}
EDIT: CSS supports focus pseudoclass but it's not supported in all browsers. In couple of years when :focus is more supported pure CSS solutions are great but in this time and place I would highly recommend to use JS.
EDIT part 2: changed let to var.
EDIT part 3: Added support for multiple buttons.
This code includes some JS.
<style>
button {
border: 1px solid black;
color: white;
font-size: 18px;
}
.buttonClicked {
border: 0;
}
</style>
<script>
var clickedButtons = [];
function onButtonClick(buttonsId) {
var button = document.getElementById(buttonsId);
if (clickedButtons.includes(buttonsId)) {
button.className = '';
clickedButtons.splice(clickedButtons.indexOf(buttonsId), 1);
} else {
button.className = 'buttonClicked';
clickedButtons.push(buttonsId);
}
}
</script>
<button id="button1" onclick="onButtonClick('button1')">
Button 1
</button>
<button id="button2" onclick="onButtonClick('button2')">
Button 2
</button>
<button id="button3" onclick="onButtonClick('button3')">
Button 3
</button>
<button id="button4" onclick="onButtonClick('button4')">
Button 4
</button>
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>
I am trying to remove the small blue border around my submit button which appears when it's pressed. I tried to fix it with border: none; but that didnt fix it.
Currently my code looks like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
<link rel="stylesheet" type="text/css" href="hover.css" />
</head>
<body>
<form id="button1" action="#" method="post">
<input type="submit" value="ORANGE"
class="btn btn-warning"/>
</form>
</body>
</html>
Jsfiddle
I'm using XAMPP to run it on localhost and Google Chrome 42.0.2311.90
UPDATE
.btn:focus {
outline: none;
}
This fixed it for me! I do not not plan on making my site accessible via keyboard so I do not need the blue outline. It's just for looks.
I think you are looking for something like this:
<style>
.btn:focus {
outline: none;
}
</style>
Add the above styles inside head tag.
By default, bootstrap have outline color blue for focused buttons.
You can remove/update it using class "btn" like mentioned above.
UPDATE
As #MatthewRapati suggested: This outline let's people know that the
button has focus and should not be removed. It is an accessibility
concern. It is better to restyle it if the default is not wanted
Remove the "outline" from the button on click (a:focus)
.btn:focus {
outline: none;
}
Demo :http://jsfiddle.net/baqunkn1/
.btn-warning {
color: #ffffff;
background-color: #ff851b;
border-color: #ff7701;
border: none;
outline:none;
}
Outline are primarily used for accessibility settings, and should be retained for default behavior unless you are providing some mechanism or highlight for focus/accessibility. If you simply remove without providing the same and user uses Keyboard to navigate, he will not be able to know what link/button he is currently on and may ruin the overall experience with your page.
Remove the outline from button
.btn-warning:focus{
outline:0px;
}
You can also remove outline from all the buttons using
input[type=button]:focus,input[type=submit]:focus{
outline:0px;
}
Default button focus has outline of 1px blue on Chrome. There are many more items which have outline, you can disable all of them using:
*{
outline:0px;
}
I used this guide to customize buttons in a web page I've made with bootstrap:
Change hover color on a button with Bootstrap customization
The problem is that I can't manage to keep the same font-color in hover and I can't explain why it always changes to dark grey.
Here's the code: http://codepen.io/anon/pen/ByKZZK
HTML:
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<button href="mailto:abc#def.ghi" class="btn btn-custom btn-lg btn-block">info#mail.org <span class="glyphicon glyphicon-envelope"></span></button>
CSS:
.btn-custom {
color: #FFD180;;
background-color: #483737;
border-color: #357ebd; /*set the color you want here*/
}
.btn-custom:hover, .btn-custom:focus, .btn-custom:active, .btn-custom.active, .open>.dropdown-toggle.btn-custom {
color: #FFD180;
background-color: #837171;
border-color: #837171; /*set the color you want here*/
}
Any ideas?
Just add !important; to the color: #FFD180 in the hover part of your CSS.
.btn-custom:hover, .btn-custom:focus, .btn-custom:active, .btn-custom.active, .open>.dropdown-toggle.btn-custom {
color: #FFD180 !important;
background-color: #837171;
border-color: #837171; /*set the color you want here*/
}
Edit: The color (#333) probably comes from this line in the bootstrap.min.css
.dropdown-toggle.btn-default{color:#333;background-color:#e6e6e6;border-color:#adadad}
Seems like some way the .btn class of bootstrap is getting more weight on your codepen, you can try to avoid the !important making more specific your selector like:
.btn.btn-custom
Check the Codepen