Develop Reference

PNG Image as Button

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

How to add a button in any expected place by using appendChild() function in JavaScript?

I want to add a button in my web page when a certain event is occurred by using javaScript. I searched online much and try to solve this problem by using appendChild() function.
My code is like this :
var btn = document.createElement(‘button’);
btn.body.appendChild(btn);
Here I am facing two problems
My button is added but in a certain corner of my html page and
I can’t add style to this new created button without providing css to other buttons.
So how can I add this button in a certain positon and add css to this button
Thanks in advance.

Your first problem is you added the button after body. So that your button is appeared in a certain corner of your html page.
To solve this problem you may add this after an id containing div. And this div must be in your expected location.
Make a div which id is myButton in your expected location
id="addButton"
Then append your button after this id like this
document.getElementById("addButton").appendChild(newButton);
To provide CSS to this new created button your CSS code will be like this
#addButton button {
display: block;
background: green;
padding: 10px;
color: #ffffff;
}
To provide the hover effect your code will be
#addButton button:hover {
background: red;
}

Append it to the document instead of a button..
var btn = document.createElement('button');
btn.innerText="button";
btn.style.background="red";
document.body.appendChild(btn);

Replace javascript controlled button with image

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.

Bootstrap navbar showing border after modal popup have been hidden

I use Bootstrap in my Rails app, in it I have a navbar that contains some elements. When I press one of these elements I present a modal popup. When I close this popup, the clicked element for some reason gets highlighted. This isn't the experience I'm looking for.
See image below:
I wonder how I can get rid of this unwanted effect?

Without you supplying us with a Fiddle, it is very hard for us to determine what is going on exactly.
Although, from your image, it seems as if it is just 'focus'. Below is an image from the Bootstrap website, and it features one of their 'default' buttons. On the left is the button in its original state, and on the right is the button after I have clicked on it and it is in 'focus'. Chrome, by default (created by their 'user agent stylesheet') places this light blue border around elements once they are focused.
To remove the border for all fields you can use the following:
*:focus {
outline: none;
}
To remove the border for selected fields just apply this class to the input fields you want:
.nohighlight:focus {
outline:none;
}

*:focus
{
outline: none;
}
this is work like a charm

Cannot position Google +1 button with CSS?

I'm having some trouble positioning the Google +1 button on my website. The div is as follows:
<div class="g-plusone"></div>
The CSS I'm using is pretty simple:
.g-plusone
{
position: absolute;
top:95px;
left:715px;
}
Despite what would seem straightforward, it simple does not want to move.
I know for a fact that the div in question is being accessed. What's strange is that other social sharing buttons, such as the FB like below follow the same syntax and are positioned perfectly.
.fb-like
{
position: absolute;
top:62px;
left:715px;
}
Adding !important to the values does nothing, unfortunately.
Any ideas?

When Google loads +1 button the .g-plusone class seems to disappear, so try to put this DIV inside another DIV, as illustrated below:
HTML:
<div class="google-button">
<div class="g-plusone"></div>
</div>
CSS:
.google-button
{
position: absolute;
top:95px;
left:715px;
}

After page loads, the Google div called g-plusone turns into a lot of code, but, you can manipulate this button with id generated.
In my case, for example, to align the button in the middle of the line I put:
#___plusone_0{
vertical-align: middle !important;
}
Note: The id ___plusone_0 is the id generated by the google codes. Do whatever you want with this id.

Use something like Firebug to ensure you're targeting the correct element. The +1 button is very deeply nested, so you'll most likely need to look further up the DOM tree to get to it's outermost wrapper. You will be able to set the position of that without needing to use !important or anything, so I would definitely check this first.
Sorry, I would have just added this as a comment above but I don't seem to be able :)