按钮边框_button 按钮边框颜色渐变效果的css3样式！

(给100素材网点亮★号，提升开发技能)

background-image：背景颜色线性渐变

button:before：绝对定位方式绘制外围颜色边框阴影效果

button:after：绝对定位方式绘制内部块状图层用于遮罩线性的背景色

button:hover:after, button:hover:before：鼠标悬浮改变伪类背景色

button:active:after, button:active:before：鼠标按住时改变伪类背景色

button:focus 获取按钮焦点时没有蓝色外线 

data-content：给button按钮填充文字

效果图：

html代码：

"Rainbow Bordered Button">

css代码：

1、背景线性渐变button按钮样式

button {border: 0;width: 15em;height: 3em;border-radius: 6.6666666667px;background-image: linear-gradient(to top right,    #ef6b61,    #f3795e,    #f7c664,    #77bba5,    #689cca,    #b895c6);color: white;font-size: 1.4em;position: relative;}

2、button:before和button:after伪类样式

button:before {content: '';position: absolute;top: -.3em;left: -.3em;bottom: -.3em;right: -.3em;background-color: #113546;z-index: -1;border-radius: 10px;box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4);transition: all .15s ease;}button:after {content: attr(data-content);position: absolute;top: .2em;left: .2em;right: .2em;bottom: .2em;display: flex;align-items: center;justify-content: center;background-color: #113546;border-radius: 5px;transition: all .15s ease;}

3、鼠标悬浮和按下的 :before:after类背景色

button:hover {cursor: pointer;}button:hover:after, button:hover:before {background-color: #16455a;}button:active:after, button:active:before {background-color: #07161d;}button:focus {outline: none;}