时间戳

首页 > 解决方案 > 按钮从左向右滑动

html - 按钮从左向右滑动

问题描述

我怀疑在我的代码中，当光标放在该图标上时，它应该向右悬停，但我的要求是，而不是向右切换，它应该向左切换。供您参考，我已经上传了我的代码

所以请帮助我做到这一点。

图标的图像

.socialIcons .add-cart-new {
  background-color: yellow;
  list-style: none;
  display: inline-block;
  margin: 4px;
  border-radius: 2em;
  overflow: hidden;
}

.socialIcons .add-cart-new a {
  display: block;
  padding: 8px;
min-width: 56px;
max-width: 56px;
  height: 2.28571429em;
  white-space: nowrap;
  line-height: 1.5em; /*it's working only when you write text with icon*/
  transition: 0.5s;
  text-decoration: none;
  font-family: arial;
  color: #fff;
}

.socialIcons .add-cart-new i {
  margin-right: 0.5em;
}

.socialIcons .add-cart-new:hover a {
  max-width: 205px;
  padding-right: 1em;
}

.socialIcons .add-cart-new {
  background-color: #EC7F4A;
}
.socialIcons .add-cart-new a
{
  position:relative;
  bottom:4px;
  right:0.3px;
} 
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <div class="socialIcons">
            <div class="add-cart-new">
              <a href="" class="add-cart-a">
                <i class="fa-3x fa fa-plus-circle"></i>
                <span class="text-add-cart">Add to cart</span>
              </a>
            </div>
          </div>

标签： htmlcss

解决方案

我不确定我是否理解正确，但这是我所做的：（
注释在代码中）

编辑：当我阅读您的评论时，我终于明白了您的意思。为此，只需反转元素和翻译。

此外，作为额外的奖励。我在 codepen 中创建了这个完全可定制的按钮。如果您愿意，请查看！（更改 scss 变量$text-direction以反转文本，在这种情况下，它用于flex-direction: row-reverse反转其元素。）

.socialIcons {
  /* Scale button by changing font-size value */
  font-size: 1.1em;
}

.socialIcons .add-cart-new {
  background-color: yellow;
  list-style: none;
  display: inline-block;
  margin: 4px;
  border-radius: 2em;
  overflow: hidden;
}

.socialIcons .add-cart-new a {
  position: relative;
}

.socialIcons .add-cart-new input{
  /* HIDE Checkbox */
  position: absolute;
  left: -1px;
  top: -1px;
  margin: 0;
  width: 0;
  height: 0;
  opacity: 0;
}

.socialIcons .add-cart-new a > label {
  /* DISPLAY FLEX and align all items in the center vertically */
  display: flex;
  align-items: center;
  /* change cursor */
  cursor: pointer;
  /* removed min-width (results in ugly extra width)*/
  max-width: 3em;
  padding: 0.2em 0.4em;
  height: auto;
  white-space: nowrap;
  line-height: 1.5em;
  text-decoration: none;
  font-family: arial;
  color: #fff;
  transition: all 0.3s ease-in;
}

.socialIcons .add-cart-new:hover a > label, .socialIcons .add-cart-new a > input:checked + label {
  /* Expand if hovered or checked */
  max-width: 12em;
}

/* WHEN UNCHECKED */

.socialIcons .add-cart-new a > input + label > i {
  /* initial margin 0 */
  margin-left: 0;
  transition: all 0.3s ease-in-out;
}

.socialIcons .add-cart-new a > input:not(:checked) + label > span{
  /* initially invisible */
  position: relative;
  max-width: 0;
  transition: all 0.3s ease-in-out;
  animation: 0.5s hideNpop ease-in-out;
}

.socialIcons .add-cart-new a > input + label > span:after{
  /* Text (initially invisible) */
  content: 'Add to cart';
  /* text to caps as in example image */
  text-transform: uppercase;
  opacity: 0;
  max-width: 0;
  transition: all 0.3s ease-in-out;
}

.socialIcons .add-cart-new:hover a > input + label > i{
  /* Add margin to icon */
  margin-left: 0.5em;
}

.socialIcons .add-cart-new:hover a > input + label > span{
  /* span visible */
  opacity: 1;
  max-width: 12em;
}

.socialIcons .add-cart-new:hover a > input + label > span:after{
  /* Text (make visible) and add padding to the right */
  opacity: 1;
  max-width: 200px;
  padding-left: 1em;
}

.socialIcons .add-cart-new input + label {
  /* Initial background-color */
  background-color: #EC7F4A;
}

/* WHEN CHECKED (same styles when hovering an unchecked except for the color and text)*/

.socialIcons .add-cart-new a > input:checked + label > i {
  margin-left: 0.5em;
  /* Move the icon from right to the left */
  -webkit-transform: translateX(-2.05em) rotate(45deg);
  -ms-transform: translateX(-2.05em) rotate(45deg);
  transform: translateX(-2.05em) rotate(45deg);
}

.socialIcons .add-cart-new a > input:checked + label > span{
  opacity: 1;
  max-width: 12em;
  /* Move the text from left to the right */
  -webkit-transform: translateX(3em);
  -ms-transform: translateX(3em);
  transform: translateX(3em);
}

.socialIcons .add-cart-new a > input:checked + label > span:after{
  /* Change text */
  content: 'Added!';
  opacity: 1;
  max-width: 6em;
  padding-left: 1em;
  animation: 0.5s hideNpop ease-in-out;
}

.socialIcons .add-cart-new input:checked + label {
  /* Checked background-color */
  background-color: #82ca9c;
}


@keyframes hideNpop {
  /* Real quick fade out and slower fade in*/
  0% {
    opacity: 1;
  }
  5% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="socialIcons">
  <div class="add-cart-new">
    <a class="add-cart-a">
      <input id="checkbox" type="checkbox">
      <label for="checkbox" class="text-add-cart">
        <span></span>
        <i class="fa-3x fa fa-plus-circle"></i>
      </label>
    </a>
  </div>
</div>

如果您有任何问题，请随时提问！干杯!

推荐阅读