css切换按钮_CSS上的切换按钮

最新推荐文章于 2024-04-12 21:46:12 发布

cullen2012

最新推荐文章于 2024-04-12 21:46:12 发布

阅读量2.2k

点赞数 1

文章标签： html css css3 js html5 ViewUI

原文链接：https://habr.com/en/post/490744/

版权

css切换按钮

Have you ever seen an attractive Toggle Button on various web-pages or apps? Today we will create it with you together!

您是否曾经在各种网页或应用程序上看到过吸引人的切换按钮 ？今天我们将与您共同创造！

为什么需要它？ (Why you need it?)

Toggle buttons are widely used in modern apps and web-pages. It makes users click on it with its attractiveness and smooth transition.

切换按钮广泛用于现代应用程序和网页中。它以其吸引力和平滑过渡使用户点击它。

创建。 HTML (Creation. HTML)

At first, we need to add the skeleton for our button using HTML. It is just an input with type=”checked” and a label for this input.

首先，我们需要使用HTML为按钮添加框架。它只是一个类型为“ checked”的输入，并带有此输入的标签。

<div class="container">
  <input type="checkbox" id="toggle-button" class="toggle-button">
  <label for="toggle-button" class="text">Toggle Button</label>
</div>

In order to bind label with the input, we use for=”toggle-button” where toggle-button is an id of our input.

为了将标签与输入绑定，我们使用for =” toggle-button” ，其中toggle-button是输入的id 。

创建。 CSS (Creation. CSS)

Now we start to customize our toggle button.

现在，我们开始自定义切换按钮。

Primarily, we need to remove the standard view of the input in the browser. We can do this by adding the appearance: none property to the class .toogle-button.

首先，我们需要在浏览器中删除输入的标准视图。我们可以通过在类.toogle-button中添加外观：none属性来实现。

.toggle-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

Edge and Edge和 IE. IE中不起作用。
Despite it, this property works correctly in all modern browsers.

尽管如此，此属性在所有现代浏览器中都能正常运行。
-webkit--webkit- Chrome, Chrome ， Safari, Safari ， Opera; Opera ； -moz--moz- Mozilla Firefox; Mozilla Firefox ；

Okay, let’s continue. And what will we see after adding appearance: none? Our checkbox will just disappear. And now we can add own styles which we want. Let’s add some styles to .toogle-button for beauty.

好吧，让我们继续。添加外观后，我们将看到什么：没有 ？我们的复选框将消失。现在，我们可以添加自己想要的样式。让我们在.toogle-button中添加一些样式以使其美观。

.toggle-button {
 position: relative;
 display: inline-block;
 width: 100px;
 height: 50px;
 margin: 0;
 vertical-align: top;
 background: #ffffff;
 border: 1px solid #bbc1e1;
 border-radius: 30px;
 outline: none;
 cursor: pointer;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
}

After applying these styles our toggle button will look as follows.

应用这些样式后，切换按钮将如下所示。

Note: I don’t show you applied styles for the label and body’s background-color because our theme is the Toggle Button

注意：由于我们的主题是“ 切换按钮”，因此我没有向您显示标签和正文的背景色的样式。

Now it is time to add circle inside our button. We can do it by adding a pseudo-element ::after.

现在是时候在按钮内添加圆圈了。我们可以通过添加一个伪元素 :: after来实现 。

.toggle-button::after {
  content: "";

  display: inline-block;
  position: absolute;
  left: 3px;
  top: 1.5px;

  width: 45px;
  height: 45px;
  background-color: blue;
  border-radius: 50%;

  transform: translateX(0);
}

Now it looks like the real Toggle Button on the web-page.

现在，它看起来像网页上的真实切换按钮 。

But furthermore, we need to add the effect of the circle’s moving after the user’s click. We can achieve this by using the transform: translate(x) property.

但是，此外，我们需要添加用户单击后圆圈移动的效果。我们可以通过使用transform：translate(x)属性来实现。

If you look at the previous code of the .toogle-button you will see transform: translateX(0). “0” here is an initial position of the circle in which it will return after unchecking.

如果查看.toogle-button的先前代码，您将看到transform：translateX(0) 。 “ 0 ”是圆的初始位置，取消选中后将返回该圆的初始位置。

In order to move the circle to the right side, we need to use pseudo-class :checked for the class .toggle-button.

为了将圆移到右侧，我们需要使用伪类 ：checked作为类.toggle-button 。

.toggle-button:checked::after {
  transform: translateX(calc(100% + 3px));
  background-color: #fff;  
}
.toggle-button:checked {
  background-color: blue;
}

In this code we can see translateX(calc(100% + 3px)) where calc(100% + 3px) calculates the position of the circle after user’s click. It is simpler to understand with the formula:

在此代码中，我们可以看到translateX(calc(100％+ 3px)) ，其中calc(100％+ 3px)计算用户单击后圆的位置。使用以下公式更容易理解：

A + A + B) B )
Where:

哪里：
A — the entire inner width of the .toggle-button; A — .toggle-button的整个内部宽度； B — property left of the .toggle-button::after (remember, we wrote left: 3px in .toggle-button::after) B — .toggle-button :: after左边的属性(记住，我们在.toggle-button :: after中写了：3px)

If you don’t understand the formula you can look at the explanation with a picture:

如果您不了解公式，可以通过图片查看说明：

Moreover, we change background-color of the circle and the .toggle-button class.

此外，我们更改圆圈和.toggle-button类的背景颜色 。

Okay, I’ m sure that all things are clear. Now our toggle button looks so:

好吧，我确定所有事情都是清楚的。现在我们的切换按钮看起来像这样：

平稳过渡 (Smooth Transition)

And at least we will add the smooth movement of our circle. We can just add simple transitions for .toggle-button and .toggle-button::after.

至少我们将添加圆的平滑运动。我们可以为.toggle-button和.toggle-button :: after添加简单的过渡。

transition: 0.3s;

But we need a more attractive effect. Let’s use cubic-bezier. You need just add the code below it to .toggle-button and .toggle-button::after.

但是我们需要一个更具吸引力的效果。让我们使用三次贝塞尔曲线 。您只需将其下面的代码添加到.toggle-button和.toggle-button :: after中 。

transition: all 0.3s cubic-bezier(0.2, 0.85, 0.32, 1.2);

And after it, we will see a great animation.

之后，我们将看到一个很棒的动画。

The circle seems to bounce off the walls of the white frame. It’s cool, isn’t it?

圆圈似乎从白色框架的墙壁反弹。很酷，不是吗？

结论 (Conclusion)

Yeah, we did it! Today we created an awesome and cool tool that you can use in your app or web-page.

是的，我们做到了！今天，我们创建了一个很棒的工具，可以在您的应用程序或网页中使用。

The full code you can find here: Toggle Button.

您可以在此处找到完整的代码 ：切换按钮。

If this article was useful to you and gave you new knowledge about CSS I would be great to see likes or comments below with feedback.

如果本文对您有用，并且为您提供了有关CSS的新知识，那么很高兴在下面看到您的喜欢或评论并提供反馈。

I’ll also be glad to read some proposals for my articles.

我也很高兴为我的文章阅读一些建议。

翻译自: https://habr.com/en/post/490744/