html div右侧渐变,Div+Css实现背景渐变的button按钮

码农公社  210.net.cn  210是何含义？10月24日是程序员节，1024 =210、210既

210

之意。

Div+Css实现背景渐变的button按钮

本文利用div和css3新属性，实现了一个背景渐变的按钮，具体如下：

1.background: linear-gradient 背景为渐变色属性

2.利用css3中动画特性animation，实现背景从左至右变化(color_move)

3.为了实现渐变效果，将background的宽度拉长至400%

网页代码：

html：

体 验

?

css:@keyframes arrow_move {

/* 开始状态 */

0% {

left: 130px;

}

/* 结束状态 */

100% {

left: 140px;

}

}

@keyframes color_move {

/* 开始状态 */

0% {

background-position: 0% 0%; /* 水平位置 垂直位置 */

}

50% {

background-position: 50% 0%;

}

/* 结束状态 */

100% {

background-position: 100% 0%;

}

}

.btn_demo {

width:180px;

height:60px;

border-radius: 10px;

position: relative;

background: linear-gradient( 90deg, #373d42 0%, #2679dd 50%, #373d42 100%);

background-size: 400% 100%;

animation: color_move 5s infinite ease-in-out alternate;

cursor: pointer;

}

.btn_demo:hover {

background: #2679dd;

}

.btn_demo:active {

background: #373d42;

}

.btn_demo > .text {

/* background: yellow; */

width: 50px;

text-align: center;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

font-size: 20px;

color: #fff;

font-weight: bold;

}

.btn_demo > .arrow {

/* background: green; */

width: 20px;

text-align: center;

position: absolute;

font-size: 30px;

color: #fff;

top: 46%;

transform: translateY(-50%);

left: 130px; /* 移动130~150px */

/* 调用动画 */

animation-name: arrow_move;

/* 持续时间 */

animation-duration: 1s;

/* 无限播放 */

animation-iteration-count: infinite;

}

效果如下：