Photoshop Question posted in
The official user guide can be found here.

How to make a transparent HTML button? – Photoshop

I am using dreamweaver to create a website and I thought of just using Photoshop to create backgrounds. I decided to do so only because in case I’d choose to change the button name easily by just editing the codes, I could just refer to the code. If I would construct buttons using Photoshop, I wouldn’t be able to edit the Texts in those buttons or in any element easily.

So my question is simple, How do I create a button that has a simple inline style making it transparent leaving the value of the button still visible.

.button {     
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;        
}

It still leaves a border shade after your click it.

Tags:

6

Answers


  1. 0

    To get rid of the outline when clicking, add outline:none

    JSFiddle example

    button {
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}

    button {
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}
    <button>button</button>
    Login or Signup to reply.
  2. 0

    The solution is pretty easy actually:

    <button style="border:1px solid black; background-color: transparent;">Test</button>

    This is doing an inline style. You’re defining the border to be 1px, solid line, and black in color. The background color is then set to transparent.

    UPDATE

    Seems like your ACTUAL question is how do you prevent the border after clicking on it. That can be resolved with a CSS pseudo selector: :active.

    button {
    border: none;
    background-color: transparent;
    outline: none;
}
button:focus {
    border: none;
}

    JSFiddle Demo

    Login or Signup to reply.
  3. 0

    Make a div and use your image ( png with transparent background ) as the background of the div, then you can apply any text within that div to hover over the button. Something like this:

    <div class="button" onclick="yourbuttonclickfunction();" >
Your Button Label Here
</div>

    CSS:

    .button {
height:20px;
width:40px;
background: url("yourimage.png");
}
    Login or Signup to reply.
  4. 0 
    <div class="button_style">
This is your button value
</div>

.button_style{   
background-color: Transparent;
border: none;             /* Your can add different style/properties of button Here*/
cursor:pointer;    
}
    Login or Signup to reply.
  5. 0

    Setting its background image to none also works:

    button {
    background-image: none;
}
    Login or Signup to reply.
  6. 0

    **add the icon top button like this **

    #copy_btn{
	align-items: center;
	position: absolute;
	width: 30px;
  height: 30px;
     background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}
.icon_copy{
	position: absolute;
	padding: 0px;
	top:0;
	left: 0;
width: 25px;
  height: 35px;
  
}
    <button id="copy_btn">

                        <img class="icon_copy" src="./assest/copy.svg" alt="Copy Text">
</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search