resize an image inside a button

Asked

Viewed 64 times

0

I have a button that was created using custom css buttons, but I switched the background for a custom image, as I resize this image to be according to the button?

follows the css

.port {
  -moz-box-shadow: 0px 1px 0px 0px #000000;
  -webkit-box-shadow: 0px 1px 0px 0px #000000;
  box-shadow: 0px 1px 0px 0px #000000;
  background-image: url('../images/br.png');
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23', GradientType=0);
  background-color: green;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  border: 3px solid #000000;
  display: inline-block;
  cursor: pointer;
  color: black;
  font-family: Georgia;
  font-size: 16px;
  font-weight: bold;
  padding: 20px 50px;
  text-decoration: none;
  text-shadow: 0px 1px 0px white;
  position: absolute;
  top: 990px;
  left: 1690px;
}

.port:hover {
  background-image: url('../images/br.png');
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64', GradientType=0);
  background-color: green;
}

.port:active {
  position: absolute;
  top: 990px;
  left: 1690px;
}

the image is this there, I wanted the button to be round that way and the image to involve all of it. http://pt.seaicons.com/wp-content/uploads/2016/09/brasil-icon.png

css

1 answer

1


Just set the size of the button, leaving the round edges and a background cover for the image fill everything by leaving centered, example:

background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
width: 100px;
height: 100px;

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.