I am trying to set an image in my assets as a button, and for the most part, have it working. The image is a PNG.
Here is my HTML code for the button:
<button type = "button" onclick = "start()"> <img src = "assets/site/start-button.png"> </button>
Here is the PNG image:
Here is what I see:
How do I make the white part of the button go away? I think (not completely sure if this is the case -- if not, could someone please explain what is happening?) that the button is encasing the image, like it does text, instead of simply having the image as a button. How do I change this? I want it to only show the PNG image, nothing else.
EDIT: I do not have any css for the button. Do I need to add anything?
You would need to remove all styles from the button, such as its background-color, border etc..
You can remove the browser's default styles by adding the CSS property apperance: none;
I'd recommend using an anchor tag, instead of a button if you're wrapping an image.
I would suggest removing the image from the button, and instead setting it as a background image in css, while remove the default button styles. Working example:
function start() {
console.log('start');
}
.button {
background: url('https://mdn.mozillademos.org/files/7693/catfront.png') no-repeat;
cursor:pointer;
border: none;
}
<input type="button" name="button" onclick="start()" class="button" />
If you are unfamiliar with css, see https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/Getting_started
Related
I am trying to create a sweet looking Button in Bootstrap. I have 4 images which show the discrete states of my button (Normal, Hover, Pressed, Disabled).
But I cant figure out what the best practice for this is. using the src in an input type image doesnt seem to be working that nice, since browsers will create a blue rect when clicking.
(I just need the whole image to be the button, its not a logo or smth that needs to be displayed on a certain position)
EDIT: its for my custom facebook/google/outlook login buttons
You need to replace the url's with the images you have.
.fb {
background: url(http://placehold.it/50x20/00ff00);
}
.fb:hover {
background: url(http://placehold.it/50x20/0000ff);
}
.outlook:disabled {
background: url(http://placehold.it/50x20/000000);
color: white;
}
.fb:active {
background: url(http://placehold.it/50x20/666666);
}
<button type="button" class="fb">button</button>
<button type="button" class="outlook" disabled>button</button>
Best practice will be to use :before elements where You will be displaying image on "button".
You can use img tag inside anchor tag to do so
For toggling between the states you can use jQuery.
Let me know if you require any further help!!
I am using javascript to control a button for a 3d carousel and trying to use an image instead of the button. My HTML looks like:
<button id="previous" data-increment="-1" >Previous</button>
<button id="next" data-increment="1">Next</button>
I tried the obvious by adding img tag where "Next" and "Previous" are:
<button id="previous" data-increment="-1" ><img src="URL" /></button>
That made the images appear, but when clicked they do nothing. I also tried to alter it with CSS and could change the style of the buttons, but the same images would not appear for both buttons. I need separate images for Next and Previous:
button {
background-image: url(images/myimage.png);
background-repeat: no-repeat;
height: 50px;
width: 200px;
border: none;
}
button span {
display: none;
}
Any ideas on why this is not working?
There are a number of things wrong here.
There is no span element in your buttons. button span style isn't doing anything for you. If you want to hide the text, I suggest using color: transparent;.
You need to apply a different image for each button, which means you need different selectors.
button#previous {
background-image: url('prev.jpg');
}
button#next {
background-image: url('next.jpg');
}
Generally, applying styles to a button won't affect listeners added in js. Something must be wrong in your js if the buttons aren't working anymore. Please post the relevant code if you'd like help with this.
I've been reading few posts to my problem and still can't find the error I'm doing. Im trying to use a lightbox which also features a transition of its background (and if possible of the box itself). What it does:
OnClick Button -> Background+Lightbox fades in. OnClick X Button -> Background+Lightbox fades out.
But it doesn't work, as I can't see where the problem lies. So, what am I doing wrong?
I've created a jsfiddle session for anyone to "fiddle" with.
JSFIDDLE
Search for this in the HTML(CSS is bascially only for the Lightbox):
<div id="light" class="white_content">This is of the Page is still under Development!</div>
<div id="fade" class="black_overlay">
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
<img style="margin-top: 20px; margin-left: 20px; width: 40px;" alt="X Button" src="res/X.png" />
</a>
</div>
You can call on the lightbox per "Products".
First of all, the element can't have display:none. If it is not visible, you wont be able to see the animation, nor the object at all.
In the JSFiddle, the css do not have any .black_over:hover part to describe the colorchange you want. Add something like .black_overlay:hover {color:red;} in the style sheet.
And one last thing: The "color" property will only set the color of the text inside the element. You either have to add some text inside the element, or edit the property to be something like background-color instead :)
I have a Twitter button on the page using the widget. The button renders as it should unless I place it into a hidden container.
I would like to place the share button into a hidden container that only shows when clicked. I have all of the functionality working, however the Twitter button will not show if placed into a hidden container.
You could use the CSS tag display: none then remove the tag when you click the button and add the tag back whenever you are done sharing to Twitter.
Something like this:
HTML
<input type="button" class="clickMe" value="Click Me" />
<img src="img/twitter.png" class="twitterPic hideMe" />
CSS
Assuming you have a separate style sheet.
.hideMe { display: none;}
JavaScript
$(".clickMe").on("click", function () {
$(".twitterPic").removeClass("hideMe");
});
Here are some links to the JQuery pages to add and remove classes:
https://api.jquery.com/removeClass/
https://api.jquery.com/addClass/
You could try the following:
place the container outside the viewport by setting its left or
right property to sth like 5000px .container {left:5000px;}
take off the display:none css
rule that's causing the problem. This way the twitter code should be
able to fire properly when the page loads
then set the container's position by using
the offset() function when the user clicks on the button. This way
the container will show where you want it to
Trying to change the background color when the hyperlink is clicked, but since there is an onclick event it appears that the click default behaviour is taken away so the active style does nothing. Would prefer to do this using CSS.
CSS:
a.myanchor.sunsetred a:active {
background-color: yellow;
}
HTML:
<p>
<a onclick="displayText("Hello world") return false;" href="#" class="myanchor sunsetred">Click to display text</a>
</p>
Any ideas that could help?
I can not see any difference with or without the onclick parameter. (In Chrome) Just to make sure, you know the active state is applied during the click. As soon as you release the mouse button, the state is released. Maybe you mean :focus instead.
Either way, I believe you have a syntax error in your style declaration. You are coloring active links inside other links, which doesn't make sense. You probably mean:
a.myanchor.sunsetred:active {
background-color: yellow;
}