All geek questions in one place

Elements with a border radius and overflow are hidden did not fix the content properly: 1px problem

I play with buttons and have run into this problem. When the button has rounded corners and there is a pseudo-element inside it to simulate the background (used for the transition), I get a 1px problem. The element before the pseudo-element is not trimmed properly, and you can hardly see any space between the border of the button and the fill color. Check out the examples:

You will see that the rounded buttons between the border and the element fill have a tiny line / space.

Any tips on how to fix it while keeping the structure the same?

EDIT 1. I know that I could use the background instead, but I cannot do this in this case. The background should be done through a pseudo-element.

EDIT 2. The problem can be seen on Win 10, Chrome and Firefox. Firefox makes it more visible. New versions: Chrome 60.0.3112.78, Firefox 54.0.1

EDIT 3. Edit the code to show why I cannot use the background property.

a {
  color: black
}

.anibtn {
  display: inline-block;
  overflow: hidden;
  padding: 8px 20px;
  margin: 0 3px 6px 3px;
  text-align: center;
  border: solid 10px black;
  text-decoration: none;
  color: $btncolor;
  white-space: nowrap;
}

.anibtn-round {
  display: inline-block;
  overflow: hidden;
  padding: 8px 20px;
  margin: 0 3px 6px 3px;
  text-align: center;
  border: solid 10px black;
  text-decoration: none;
  color: $btncolor;
  white-space: nowrap;
  border-radius: 50px;
}


.tr-fill-on {
  position: relative;
  transition-duration: .3s;
}

.tr-fill-on:before {
  position: absolute;
  content: '';
  background: black;
  transition-duration: .3s;
  z-index: -1;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
}
  
.tr-fill-on:hover {
  color: white;
}

.tr-fill-on:hover:before {
  width:100%;
}




.tr-fill2-on{
  color: white;
  position: relative;
  transition-duration: .3s;
}
.tr-fill2-on:before {
  position: absolute;
  content: '';
  background: black;
  transition-duration: .3s;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.tr-fill2-on:hover {
  color: black;
}

.tr-fill2-on:hover:before {
  width:0;
}
<a href="#" class="anibtn tr-fill-on">Ani Buttons</a>
<a href="#" class="anibtn tr-fill2-on">Ani Buttons</a>
<a href="#" class="anibtn-round tr-fill-on">Ani Buttons</a>
<a href="#" class="anibtn-round tr-fill2-on">Ani Buttons</a>
Run codeHide result
+4
source share
3 answers

( ) ( ) . , , z. (1), (2) , , .

, , (, Opera Mini). , transform:translateX transform:translate3d left.

a {
  color: black
}

.anibtn {
  display: inline-block;
  overflow: hidden;
  padding: 8px 20px;
  margin: 0 3px 6px 3px;
  text-align: center;
  border: solid 10px black;
  text-decoration: none;
  color: $btncolor;
  white-space: nowrap;
  background: linear-gradient(black,black); /* 1 */
}

.anibtn-round {
  display: inline-block;
  overflow: hidden;
  padding: 8px 20px;
  margin: 0 3px 6px 3px;
  text-align: center;
  border: solid 10px black;
  text-decoration: none;
  color: $btncolor;
  white-space: nowrap;
  border-radius: 50px;
  background: linear-gradient(black,black); /* 1 */
}


.tr-fill-on {
  position: relative;
  transition-duration: .3s;
  z-index: 1; /* 2 */
}

.tr-fill-on:before {
  position: absolute;
  content: '';
  background: linear-gradient(90deg, white, white 50%, black 50%);
  transition: all .3s;
  z-index: -1;
  left: -1%;
  top: -1%;
  width: 204%;
  height: 102%;
}
  
.tr-fill-on:hover {
  color: white;
}

.tr-fill-on:hover:before {
  left: -103%;
}




.tr-fill2-on{
  color: white;
  position: relative;
  transition-duration: .3s;
  z-index: 1; /* 2 */
}
.tr-fill2-on:before {
  position: absolute;
  content: '';      
  background: linear-gradient(90deg, white, white 50%, black 50%);
  transition: all .3s;
  z-index: -1;
  left: -103%;
  top: -1%;
  width: 204%;
  height: 102%;
}
.tr-fill2-on:hover {
  color: black;
}

.tr-fill2-on:hover:before {
  left: -1%;
}
<a href="#" class="anibtn tr-fill-on">Ani Buttons</a>
<a href="#" class="anibtn tr-fill2-on">Ani Buttons</a>
<a href="#" class="anibtn-round tr-fill-on">Ani Buttons</a>
<a href="#" class="anibtn-round tr-fill2-on">Ani Buttons</a>
Hide result
+2

:

, ;)

border, border-shadow

.anibtn-round {
  /* border: solid 2px black; */
  box-shadow: inset 0px 0px 0px 2px black;
}

;)

0

, overflow: hidden; white-space: nowrap; , , .

a {
  color: black
}

.anibtn {
  display: inline-block;
  padding: 8px 20px;
  margin: 0 3px 6px 3px;
  text-align: center;
  border: solid 10px black;
  text-decoration: none;
  color: $btncolor;
}

.anibtn-round {
  display: inline-block;
  padding: 8px 20px;
  margin: 0 3px 6px 3px;
  text-align: center;
  border: solid 10px black;
  text-decoration: none;
  color: $btncolor;
  border-radius: 50px;
}


.tr-fill-on {
  position: relative;
  transition-duration: .3s;
}

.tr-fill-on:before {
  position: absolute;
  content: '';
  background: black;
  transition-duration: .3s;
  z-index: -1;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
}
  
.tr-fill-on:hover {
  color: white;
}

.tr-fill-on:hover:before {
  width:100%;
}




.tr-fill2-on{
  color: white;
  position: relative;
  transition-duration: .3s;
}
.tr-fill2-on:before {
  position: absolute;
  content: '';
  background: black;
  transition-duration: .3s;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.tr-fill2-on:hover {
  color: black;
}

.tr-fill2-on:hover:before {
  width:0;
}
<a href="#" class="anibtn tr-fill-on">Ani Buttons</a>
<a href="#" class="anibtn tr-fill2-on">Ani Buttons</a>
<a href="#" class="anibtn-round tr-fill-on">Ani Buttons</a>
<a href="#" class="anibtn-round tr-fill2-on">Ani Buttons</a>
Hide result
0

Source: https://habr.com/ru/post/1682561/

More articles:


All Articles