代码之家 › 专栏 › 技术社区 › Taylor Austin

制作一个重影填充动画按钮,并存在边界半径问题

animation css html javascript

Taylor Austin · 技术社区 · 8 年前

当我以一种动画的方式悬停时,我试图填充一个按钮,它工作得很好。我使用:before css属性创建了一个动画的DIV来填充悬停时的按钮。我现在的问题是,我有一个边界半径按钮和相同的边界半径:之前的DIV,但他们不匹配。

<div class="flex">
  <button href="#0" class="bttn">Continue</button>
</div>

@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:700';

$font:'Source Sans Pro', sans-serif;
$primary:#FF0072;

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body{
    height:100%;
    width: 100%;
}

body {
  padding:0px;
  margin:0;
  font-family:$font;
  background: #F5F0FF;
  -webkit-font-smoothing: antialiased;
}

.flex {
  min-height:50vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

button.bttn {
  color:$primary;
  border-radius: 22px;
  text-decoration:none;
  -webkit-transition:0.3s all ease;
  transition:0.3s ease all;
  &:hover {
    color:#FFF;
  }
  &:focus {
    color:#FFF;
  }
}

.bttn {
  font-size:18px;
  letter-spacing:2px;
  text-transform:uppercase;
  display:inline-block;
  text-align:center;
  width:270px;
  font-weight:bold;
  padding:14px 0px;
  border:3px solid $primary;
  border-radius:2px;
  position:relative;
  z-index: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.1);
  &:before {
    -webkit-transition:0.5s all ease;
    transition:0.5s all ease;
    position:absolute;
     border-radius: 22px;
    top:0;
    left:50%;
    right:50%;
    bottom:0;
    opacity:0;
    content:'';
    background-color:$primary;
    z-index:-1;
  }
  &:hover {
    &:before {
      -webkit-transition:0.5s all ease;
      transition:0.5s all ease;
      left:0;
      right:0;
      opacity:1;
    }
  }
  &:focus {
    &:before {
      transition:0.5s all ease;
      left:0;
      right:0;
      opacity:1;
    }
  }
}

这是一个代码笔来显示我目前拥有的东西。 https://codepen.io/anon/pen/YvxLKp

2 回复 | 直到 8 年前

Dennis Spierenburg 8 年前

您正在创建一个:以前的大小不正确:我不确定这是怎么回事,但我知道如何解决这个问题。你的边界正在缩小你的纽扣尺寸。不幸的是,这个尺寸不能加在您的:之前的尺寸上。你可以计算这个尺寸(你的盒子是3倍),在你的左右两边加上这个尺寸的负数。

&:hover {
    &:before {
        -webkit-transition:0.5s all ease;
        transition:0.5s all ease;
        left: -3px;
        right: -3px;
        opacity:1;
    }
}

对焦点状态也可以这样做