CODEWITHSUNDEEP
htmlcss
esso
esso

Reputation: 1

Weird frame around image-button

I made an image-button which is hovering between to pictures. For some reason there is a frame around the picture when I set it as a in html.

I've tried to change the button to just and then the weird frame disappears but the the pressed down effect on to button doesn't work. 

.img {
  padding-left: auto;
  align-items: center;
  width: 200px;
  height: 200px;
  background: url("src/assets/red2.png")no-repeat;
}
.img:hover {
  padding-left: auto;
  align-items: center;
  width: 200px;
  height: 200px;
  background: url("src/assets/red1.png") no-repeat;
}

.img:active {
  background: url("src/assets/red1.png") no-repeat;
}
.img:focus {
  background: url("src/assets/red1.png") no-repeat;
}

.img:target {
  background: url("src/assets/red1.png") no-repeat;
}
<td>
 <button type=button (click)="" class="img"></button>
</td>

Upvotes: 0

Views: 58

Answers (3)

Michiel J Otto
Michiel J Otto

Reputation: 2321

As GolezTrol stated, it's just the button default style to add a border.

What I use in these cases is simply

.img {
border: none;
outline: none;
}

This will ensure that the button has no border and also has no outline when active.

Upvotes: 0

SuperDJ
SuperDJ

Reputation: 7661

Just add border:0; to get rid of the grey border and outline: none; if you want to get rid of the blue outline.

.img {
  padding-left: auto;
  align-items: center;
  width: 200px;
  height: 200px;
  background: url("src/assets/redsmiley2.png")no-repeat;
  border: 0;
  outline: none;
}
.img:hover {
  padding-left: auto;
  align-items: center;
  width: 200px;
  height: 200px;
  background: url("src/assets/redsmiley1.png") no-repeat;
}

.img:active {
  background: url("src/assets/redsmiley1.png") no-repeat;
}
.img:focus {
  background: url("src/assets/redsmiley1.png") no-repeat;
}

.img:target {
  background: url("src/assets/redsmiley1.png") no-repeat;
}
<td>
 <button type=button (click)="" class="img"></button>
</td>

Upvotes: 2

Seth B
Seth B

Reputation: 1056

Try adding 

.img{
    border:0;
}

Also make sure the 

<td>

tag is in a table.

Upvotes: 0

Related Questions