I'm only just learning html and have a question about linking a button. Could you tell me what I am doing wrong here?
</style>
<body>
<button onClick="name.html" class="button" ><span>name </span> </button>
<br>
In your application you should rather use an anchor link, because the button mostly used in forms. The corresponding HTML tag is <a>.
If you want to make your link look like a button you can give it a class and design it with CSS.
name
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
Related
I need a link on the text ”[[phone]]” Which appears the first time you press the button. The link should be ”tel:[[phone]]” to be able to click on a phone number and call it directly.
function change() {
document.getElementById("myButton1").value = "[[phone]]";
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
<input onclick="change()" type="button" class="button" value="Visa nummer" id="myButton1">
You can use window.open() in your click() -function, that way you can use any element.
'_self' is so it opens the link in the same window.
window.open('tel:123456789', '_self');
Similar question: how to call a phone number through javascript without using <a> tag?
I have some HTML code that includes some css and I want the button to actually have a use like a hyperlink I press it and it takes me to a certain file or web address I have tried using actual hyperlinks inside the field but it looked ugly and I could only press on the hyperlink, I tried adding a HTML default hyperlink button but it cannot be colored.
Here's the code:
<html>
<body style="background-color:rgb(48, 45, 45)">
<font color="white">
<font color="#4CAF50">
<head>
<style>
.button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {background-color: #4CAF50;}
.button2 {background-color: #008CBA;}
</style>
</head>
<body>
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
</body>
Use an onclick element:
<button onclick="goToStackOverflow()">Click Me</button>
<script>
function goToStackOverflow() {
document.location.href = "https://stackoverflow.com";
}
</script>
Or you could style an <a> element to look like a button
a {
color: white;
background-color: orange;
text-decoration: none;
padding: 10px 15px;
border-radius: 8px;
cursor: pointer;
}
a:hover {
opacity: 0.8;
}
a:active {
opacity: 0.6;
}
Click Me
For linking to a file specifically, you can also use the <a> tag mentioned above but with a relative URL as apposed to an absolute one (AKA, without 'https://www.' included).
For example, if you placed the file in an inner directory off your base directory, you could use the following snippet:
File
More on this here.
So I've got some section anchors inside a fixed header. I wanted to see if there's any css property/trick/hack I'm not aware of that will allow me to have the selected section anchor's color change when you select it, and obviously change back to the regular style when you select another section. I'm not sure if this is even possible, but I cannot use javascript - only css. It's all on a one-page site, so it's not like I'm changing the color on a new page.
<header>
<ul>
<li>○</li>
<li>○</li>
<li>○</li>
<li>○</li>
<li>○</li>
</ul>
<header>
EDIT : A new approach.
After some research I decided to play around with the :focus feature of buttons.
Here's what I got:
HTML
<button href="one" class="circle">○</button>
<button href="two" class="circle">○</button>
<button href="three" class="circle">○</button>
<button href="four" class="circle">○</button>
CSS
.circle{
background-color: none;
border: none;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
}
.circle:focus {
color: red;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
I thought I could use buttons as anchor tags... fail.
You can use :focus.
a:focus {
background-color: red;
}
How remove this line beetween buttons? First time I have this situation. Please look at my code here:
<a href="#info-section">
<button class="cta-btn rg">WATCH</button>
</a>
<a href="#info-section">
<button class="cta-btn lf">LEARN MORE</button>
</a>
My CSS responsive for buttons:
.cta-btn{
padding: 15px;
border-radius: 30px;
width: 150px;
font-size: .8em;
color: #fff;
background-color: inherit;
border: 1px solid #fff;
margin-top: 20px;
&:hover{
cursor: pointer;
}
}
.rg {
margin-right: 10px;
}
.lf{
margin-left: 10px;
}
I think that line is the underline of the A-tags.
Try adding text-decoration: none; to your <a>. Like this:
a {
text-decoration: none;
}
It could also be possible you forgot to close an A-tag before this part of your code. So check if every <a> has an closing </a>
I assume it's to do with the way you have the <a> tags surrounding the <button> but changing it to <button class="cta-btn rg">WATCH</button> removes the underline. It's almost as if there's a space character that it's formatting.
Note, this isn't the correct way to do it, but it removes the underline.
how could add css style to this button.
Button html:
<html>
<body>
<button onclick="myFunction()">Player</button>
<script>
function myFunction() {
alert('what ever');
}
</script>
</body>
</html>
CSS i want to add
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
If there is answered question, please send link. Thank you
You could add class="button" to the button to make it work. Cause your CSS .button will be used on every element which has the class="button"
function myFunction() {
alert('what ever')
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
<button class="button" onclick="myFunction()">Player</button>
Read more about how CSS Selectors work here
<button class="button" onclick="myFunction()">Player</button>
As your button class you've set it ".button" add "button" as a class like above
Anything you put after the . will match the name of the class in the element
https://css-tricks.com/the-difference-between-id-and-class/ explains how you use classes, ids and what they do in good detail
In your case, you're two solutions :
First : use classe, if you've differents buttons in your pages :
you can just add class attribute in your HTML element like that :
<html>
<body>
<button class="btn" onclick="myFunction()">Player</button>
<script>
function myFunction() {
alert('what ever');
}
</script>
</body>
</html>
And define the style in your class in your CSS :
<style>
.btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
Second : If all buttons are the same style, you can just add style for all element button :
Not change your HTML :
<html>
<body>
<button onclick="myFunction()">Player</button>
<script>
function myFunction() {
alert('what ever');
}
</script>
</body>
</html>
But, in your CSS, just change the reference, for select elements button :
<style>
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
You can learn more explain about selector (.myClass, #myId, element) here in the mozilla developper website.
Don't forget, for optimize your web code, use as little code as possible, for reduce weight of pages, and to correctly use the different selectors (classes or id as not mandatory for CSS style : that depend to your utility) :)
Instead of declaring class button i.e(.button) you can apply style to all button elements.
Demo- https://jsfiddle.net/akshay193sw/bxm8wdqk/ Refer link
If you want to style a button I recommend adding a class to it and styling it with CSS. Here is an example below.
HTML Below
<button class='button_thing'> My Button </button>
CSS Below
.button_thing {
background-color: blue;
width: 180px;
height: 100px;
border-radius: 10px;
}
So what the CSS and HTML code above will do is it will create a blue button with a curved border and with a height of 100 pixels and width of 180 pixels. Now, the next question you might ask is how do I make an animation on the button when I hover over it?
CSS Hover Animations are a bit tricky at the start but get easier with practice. When I make buttons for my websites I like to use a site called ButtonAnimations because it gets straight to the point and gives me tons of animations (with HTML & CSS code) to choose from. Totally recommend it because it simply provides you with amazing buttons and animations that you can just copy and paste into your code. ButtonAnimations Website Link: ButtonAnimations - Create Spectacular Button Animations with HTML 7 CSS