html如何实现滑动按钮,CSS滑动按钮

css

html {

font-family: 'Inconsolata', monospace;

font-weight: 700;

font-size: 20px;

}

html, body {

height: 100%;

width: 100%;

margin: 0;

background: #2c3e50;

}

.main {

width: 100%;

height: 100%;

background-color: #2c3e50;

}

.group {

width: 340px;

height: 40px;

padding: 10px 40px;

line-height: 40px;

position: relative;

z-index: 1;

margin-left: auto;

margin-right: auto;

margin-top: 100px;

}

.one {

float: left;

line-height: 40px;

color: white;

text-decoration: none;

transition: 1.0s;

}

.two {

float: right;

text-decoration: none;

line-height: 40px;

color: #a6afbf;

}

.bg {

background-color: #e67e22;

height: 60px;

width: 190px;

position: absolute;

top: 0;

margin-left: -260px;

z-index: -1;

transition: 1.0s;

border-radius: 5px;

}

span:hover + .bg {

width: 200px;

margin-left: -40px;

background: #27ae60;

}

.two > span:hover {

color: white;

}

.two:hover ~ .one {

color:#fff;

}

span {

padding: 10px 0;

transition: 1.0s;

}