Question

我创建了一个带有css过渡的按钮，可以改变颜色：悬停。我想要盒子的边框和阴影，以及按钮内的文字同时转换颜色。

但它看起来像一个奇怪的bug，因为on：在按钮的其余部分同时悬停文本下划线更改，但实际文本在其他完成转换后开始转换。

PUG：

a(href="#")
  .button 
   p read more

SASS：

$darkColor: #111210
$accentColor: #DD452A

a
  color: $darkColor
  transition: all 200ms ease-in-out

  &:hover
    color: $accentColor

.button
  display: flex
  align-items: center
  justify-content: center
  border: solid 1px $darkColor
  border-radius: 20px
  height: 40px
  box-shadow: 0px 1px 0px $darkColor
  transition: all 200ms ease-in-out

  &:hover
    cursor: pointer
    border: solid 1px lighten($darkColor, 50%)
    box-shadow: 0px 1px 0px lighten($darkColor, 50%)

See codepen of it here.

Video demonstration.（等一下看慢版）

Answer 1

问题很可能是因为默认情况下控制下划线的文本修饰属性无法转换。如果你需要它与其他元素完美地过渡，我建议删除装饰：

text-decoration: none;

并使用box-shadow或border-bottom

进行模拟

box-shadow: inset 0 -1px 0 #000; /*or*/
border-bottom: 1px solid #000;

无论哪种方式，属性都会按预期转换，但我倾向于使用box-shadow，因为它不会影响元素的大小。

希望有所帮助。

马丁

Answer 2

您希望使用文字修饰的替代方法为文本加下划线：下划线。

这个CSS可以解决问题。

$darkColor: #111210
$accentColor: #DD452A

a
  color: $darkColor
  transition: all 200ms ease-in-out
  text-decoration: none

  &:hover
    color: $accentColor

.button
  display: flex
  align-items: center
  justify-content: center
  border: solid 1px $darkColor
  border-radius: 20px
  height: 40px
  box-shadow: 0px 1px 0px $darkColor
  transition: all 200ms ease-in-out

  &:hover
    cursor: pointer
    border: solid 1px lighten($darkColor, 50%)
    box-shadow: 0px 1px 0px lighten($darkColor, 50%)

.button p
  display: inline-block
  position: relative

  &:after
    content: ''
    position: absolute
    left: 0
    display: inline-block
    height: 1em
    width: 100%
    border-bottom: 1px solid
    margin-top: 0px

See CodePen of it here.

Answer 3

使用此样式，它适用于我

 background-color: #FAFAFA;
 background-image: linear-gradient(to bottom, #FAFAFA 2%, #EFEFEF 98%);
 border-color: #C5C5C5 #C5C5C5 #BCBCBC;
 border-image: none;
 border-radius: 4px 4px 4px 4px;
 border-style: solid;
 border-width: 1px;
 box-shadow: 0 1px 0 #FFFFFF inset, 0 -1px 0 #E7E7E7 inset, 0 2px 3px rgba(0, 0, 0, 0.05);
 color: #191919;
 cursor: pointer;
 font-weight: 400;
     min-width: 81px;
 height: 37px;
 outline: medium none;
 padding: 0 16px;
 position: relative;
 text-align: center;
 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
 white-space: nowrap;
     font-size:14px;
 line-height: 36px;

CSS过渡时不需要的延迟。文本下划线在实际文本之前更改

3 个答案: