网红前端按钮

## 效果图
### 太阳
![](https://blog.coolcooltomato.com/uploads/article/按钮-太阳.png)

### 月亮
![](https://blog.coolcooltomato.com/uploads/article/按钮-月亮.png)

## 原理
1. 单击按钮触发js事件，切换css样式表
2. 背景垂直平移
3. 太阳/月亮水平平移

## 代码
### html
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="button.css">
    <link rel="stylesheet" href="dark.css" id="theme" class="dark">
    <script type="text/javascript" src="button.js"></script>
    <title>Button</title>
</head>
<body>
    <div id="box">
        <div id="background">
            <div id="dark">
                <div class="dc"></div>
                <div class="dc"></div>
                <div class="dc"></div>
                <div class="dc"></div>
                <div class="dc"></div>
                <div class="dc"></div>
                <div class="dc"></div>
                <div class="dc"></div>
            </div>
            <div id="light">
                <div class="lc"></div>
                <div class="lc"></div>
                <div class="lc"></div>
                <div class="lc"></div>
                <div class="lc"></div>
                <div class="lc"></div>
                <div class="lc"></div>
                <div class="lc"></div>
                <div class="lc"></div>
                <div class="lc"></div>
                <div class="lc"></div>
                <div class="lc"></div>
            </div>
        </div>
        <div id="o1">
            <div id="o2">
                <div id="o3">
                    <div id="o" onclick="change()">
                        <div class="gra"></div>
                        <div class="gra"></div>
                        <div class="gra"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="box_shadow" onclick="change()"></div>
</body>
</html>
```

### button.css
```css
body{
    transition: 0.4s ease-in-out;
}
#box{
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    width: 500px;
    height: 200px;
    border-radius: 100px;
    overflow: hidden;
}
#background{
    width: 500px;
    height: 400px;
    position: absolute;
    transition: 0.4s ease-in-out;
    overflow: hidden;
}
#dark{
    width: 100%;
    height: 50%;
    left: 0;
    top: 0;
    position: absolute;
    background-color: rgb(40, 50, 60);
}
.dc{
    background-color: white;
    border-radius: 50%;
    position: absolute;
}
.dc:nth-of-type(1){
    width: 15px;
    height: 15px;
    top: 30px;
    left: 250px;
}
.dc:nth-of-type(2){
    width: 30px;
    height: 30px;
    left: 260px;
    top: 150px;
}
.dc:nth-of-type(3){
    width: 10px;
    height: 10px;
    left: 240px;
    top: 100px;
}
.dc:nth-of-type(4){
    width: 25px;
    height: 25px;
    left: 160px;
    top: 40px;
}
.dc:nth-of-type(5){
    width: 5px;
    height: 5px;
    left: 60px;
    top: 40px;
}
.dc:nth-of-type(6){
    width: 5px;
    height: 5px;
    left: 80px;
    top: 50px;
}
.dc:nth-of-type(7){
    width: 15px;
    height: 15px;
    left: 130px;
    top: 120px;
}
.dc:nth-of-type(8){
    width: 10px;
    height: 10px;
    left: 80px;
    top: 160px;
}
#light{
    width: 100%;
    height: 50%;
    left: 0;
    bottom: 0;
    position: absolute;
    background-color: rgb(90, 128, 177);
}
.lc{
    background: white;
    position: absolute;
}
.lc:nth-of-type(12){
    width: 170px;
    height: 170px;
    left: 20px;
    bottom: -100px;
    border-radius: 50%;
}
.lc:nth-of-type(11){
    width: 160px;
    height: 160px;
    left: 150px;
    bottom: -100px;
    border-radius: 50%;
}
.lc:nth-of-type(10){
    width: 160px;
    height: 160px;
    left: 300px;
    bottom: -60px;
    border-radius: 50%;
}
.lc:nth-of-type(9){
    width: 150px;
    height: 150px;
    left:420px;
    bottom: 40px;
    border-radius: 50%;
}
.lc:nth-of-type(8){
    width: 60px;
    height: 60px;
    left: 270px;
    bottom: 0;
    border-radius: 50%;
}
.lc:nth-of-type(7){
    width: 130px;
    height: 130px;
    right: 0;
    bottom: 0;
    border-top-left-radius: 50%;
}
.lc:nth-of-type(6){
    width: 200px;
    height: 200px;
    left: 5px;
    bottom: -100px;
    border-radius: 50%;
    background: rgb(170, 190, 215);
}
.lc:nth-of-type(5){
    width: 170px;
    height: 170px;
    left: 140px;
    bottom: -60px;
    border-radius: 50%;
    background: rgb(170, 190, 215);
}
.lc:nth-of-type(4){
    width: 80px;
    height: 80px;
    left: 250px;
    bottom: 30px;
    border-radius: 50%;
    background: rgb(170, 190, 215);
}
.lc:nth-of-type(3){
    width: 160px;
    height: 160px;
    left: 300px;
    bottom: 0;
    border-radius: 50%;
    background: rgb(170, 190, 215);
}
.lc:nth-of-type(2){
    width: 60px;
    height: 60px;
    right: 60px;
    top: 20px;
    position: absolute;
    border-radius: 50%;
    background: rgb(170, 190, 215);
}
.lc:nth-of-type(1){
    width: 50px;
    height: 50px;
    right: 40px;
    top: 0;
    position: absolute;
    border-radius: 50%;
    background: rgb(170, 190, 215);
}
#o{
    width: 175px;
    height: 175px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    transition: 0.4s ease-in-out;
    box-shadow: 5px 5px 5px inset #FFFFFF, -5px -5px 5px inset #888888, 0 0 10px #404040;
}
#o1{
    width: 600px;
    height: 600px;
    border-radius: 50%;
    top: 100px;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    background: rgb(255, 255, 255, 0.1);
    transition: 0.4s ease-in-out;
}
#o2{
    width: 450px;
    height: 450px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    background: rgb(255, 255, 255, 0.1);
}
#o3{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    background: rgb(255, 255, 255, 0.1);
}
.gra{
    border-radius: 50%;
    position: absolute;
    transition: 0.4s ease-in-out;
}
.gra:nth-of-type(1){
    width: 30px;
    height: 30px;
    left: 80px;
    top: 30px;
}
.gra:nth-of-type(2){
    width: 55px;
    height: 55px;
    left: 30px;
    top: 70px;
}
.gra:nth-of-type(3){
    width: 40px;
    height: 40px;
    left: 100px;
    top: 100px;
}
#box_shadow{
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    width: 500px;
    height: 200px;
    border-radius: 100px;
    box-shadow: 5px -5px 10px inset rgb(250, 250, 250, 0.2), -5px 5px 10px inset rgb(0, 0, 0, 0.3),
    -5px 5px 10px rgb(250, 250, 250, 0.2), 5px -5px 10px rgb(0, 0, 0, 0.3);
}
```

### light.css
```css
body{
    background: #EEEEEE;
}
#background{
    left: 0;
    top: -100%;
}
#o1{
    left: 100px;
}
#o{
    background: rgb(245, 215, 90);
}
.gra{
    background: rgb(245, 215, 90);
}
```

### dark.css
```css
body{
    background: #333333;
}
#background{
    left: 0;
    top: 0;
}
#o1{
    left: 400px;
}
#o{
    background: rgb(215, 215, 230);
}
.gra{
    background: rgb(160, 170, 180);
}
```

### button.js
```javascript
window.onload = change();

网红前端按钮

酷酷番茄