网页按钮效果css3,css3按钮效果

た入场券 2022-09-02 14:53 183阅读 0赞

/\* Box colors \*/

.bg-1 \{

background:\#ECEFF1;

color:\#37474f;

/\* Common button styles \*/

.button \{

float:left;

min-width:150px;

max-width:250px;

display:block;

margin:1em;

padding:1em 2em;

border:none;

background:none;

color:inherit;

vertical-align:middle;

position:relative;

z-index:1;

\-webkit-backface-visibility:hidden;

\-moz-osx-font-smoothing:grayscale;

.button:focus \{

outline:none;

.button > span \{

vertical-align:middle;

/\* Text color adjustments (we could stick to the "inherit" but that does not work well in Safari) \*/

.bg-1 .button \{

color:\#37474f;

border-color:\#37474f;

.button--round-s \{

border-radius:5px;

.button--quidel \{

background:\#aebbff;

color:\#7986cb;

overflow:hidden;

\-webkit-transition:color 0.3s;

transition:color 0.3s;

\-webkit-transition-timing-function:cubic-bezier(0.75,0,0.125,1);

transition-timing-function:cubic-bezier(0.75,0,0.125,1);

.button--quidel.button--inverted \{

background:\#fff;

color:\#fff;

.button--quidel::before,.button--quidel::after \{

content:'';

position:absolute;

z-index:-1;

border-radius:inherit;

.button--quidel::after \{

top:2px;

left:2px;

right:2px;

bottom:2px;

background:\#fff;

.button--quidel.button--inverted::after \{

background:\#37474f;

.button--quidel::before \{

background:\#37474f;

top:0;

left:0;

width:100%;

height:100%;

\-webkit-transform:translate3d(0,100%,0);

transform:translate3d(0,100%,0);

\-webkit-transition:-webkit-transform 0.3s;

transition:transform 0.3s;

\-webkit-transition-timing-function:cubic-bezier(0.75,0,0.125,1);

transition-timing-function:cubic-bezier(0.75,0,0.125,1);

.button--quidel.button--inverted::before \{

background:\#7986cb;

.button--round-s.button--quidel::after \{

border-radius:3px;

.button--round-m.button--quidel::after \{

border-radius:13px;

.button--round-l.button--quidel::after \{

border-radius:40px;

.button--quidel > span \{

padding-left:0.35em;

.button--quidel:hover \{

color:\#37474f;

.button--quidel.button--inverted:hover \{

color:\#7986cb;

.button--quidel:hover::before \{

\-webkit-transform:translate3d(0,0,0);

transform:translate3d(0,0,0);

网页按钮效果css3,css3按钮效果

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 css制作按钮按下去效果

相关 109.现代CSS按钮悬停效果

相关 CSS box-shadow实现按钮悬浮效果

相关八、CSS3点击按钮圆形进度打钩效果

相关 php实现动态按钮效果,CSS实现发光的按钮效果（代码示例）

相关 html鼠标悬停按钮效果,纯css3实现的鼠标悬停动画按钮

相关 CSS3样式控制input按钮效果

相关 css3 按钮翻转效果

相关网页按钮效果css3,css3按钮效果

相关 CSS3网页常见动态效果……