藤藤每日一练——Get The App Button

发布于藤藤

13 年前

今天这个案例是使用CSS3制作了四个不同的App下载按钮。这个效果中主要使用了gradient制作渐变按钮效果，配合@font-face制作向右的箭头效果，同时使用box-shadow制作阴影效果,而且使用了:nth-child选择器来控制不同按钮的效果。详细的请看具体代码。

demo download

HTML 结构

ul class="buttons_list">
  <li><button type="button" class="button">Get The App</button></li>
  <li><button type="button" class="button">Get The App</button></li>
  <li><button type="button" class="button">Get The App</button></li>
  <li><button type="button" class="button">Get The App</button></li>
</ul>

CSS代码

body{
  background: #d9dadc;
}
.buttons_list{
  width: 300px;
  margin: 40px auto 0;
}
.buttons_list li{
  position: relative;
  height: 70px;
}
.buttons_list li:after{
  position:absolute;
  top:8px;
  left: -50px;
  content: "1";
  font-weight: bold;
  text-shadow:0 -1px 0 #fff;
  display: inline-block;
  width: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 15px;
  box-shadow: 0 1px 0 rgba(0,0,0,.4),0 0 0 3px rgba(0,0,0,.1);
  background: #ecedee;
}
.buttons_list li:nth-child(2):after{
  content: "2";
}
.buttons_list li:nth-child(3):after{
  content: "3";
}
.buttons_list li:nth-child(4):after{
  content: "4";
}
.buttons_list .button{
  position: relative;
  height: 46px;
  padding: 0 10px;
  color: #fff;
  font-weight: bold;
  text-shadow:0 -1px 0 #72a22a;
}
.buttons_list li:nth-child(1) .button{
  border:1px solid #264402;
  border-radius: 5px;
  box-shadow: 0 1px 0 #a3e24e inset,0 1px 0 rgba(0,0,0,.2);
  background:-webkit-linear-gradient(top,#81b33d,#4a7119);
  background:-moz-linear-gradient(top,#81b33d,#4a7119);
  background:-ms-linear-gradient(top,#81b33d,#4a7119);
  background:-o-linear-gradient(top,#81b33d,#4a7119);
  background:linear-gradient(top,#81b33d,#4a7119);
}
.buttons_list li:nth-child(2) .button{
  border:1px solid #7ea430;
  border-radius: 5px;
  box-shadow:0 -3px 0 #7fa532 inset,0 -3px 0 1px #aad667 inset,0 1px 2px rgba(0,0,0,1);
  background:-webkit-linear-gradient(top,#a9d643,#86be31 50%,#72a22a 50%,#90b639 75%);
  background:-moz-linear-gradient(top,#a9d643,#86be31 50%,#72a22a 50%,#90b639 75%);
  background:-ms-linear-gradient(top,#a9d643,#86be31 50%,#72a22a 50%,#90b639 75%);
  background:-o-linear-gradient(top,#a9d643,#86be31 50%,#72a22a 50%,#90b639 75%);
  background:linear-gradient(top,#a9d643,#86be31 50%,#72a22a 50%,#90b639 75%);
}
.buttons_list li:nth-child(3) .button{
  font-size: 14px;
  padding-left:25px;
  margin-left:5px;
  border:1px solid #7ea430;
  border-radius: 24px;
  box-shadow:0 -1px 0 #4e6c1e inset,0 -4px 0 #54830e inset,0 0 4px 1px rgba(0,0,0,.2),0 0 0 6px rgba(0,0,0,.085),0 0 0 7px rgba(255,255,255,.2);
  background:-webkit-linear-gradient(top,#99d838,#72b016);
  background:-moz-linear-gradient(top,#99d838,#72b016);
  background:-ms-linear-gradient(top,#99d838,#72b016);
  background:-o-linear-gradient(top,#99d838,#72b016);
  background:linear-gradient(top,#99d838,#72b016);
}
.buttons_list li:nth-child(4) .button{
  border:none;
  border-radius: 5px;
  box-shadow:0 1px 0 #33400f,0 -1px 0 #5f7827 inset,0 -2px 0 #7fa532 inset,0 -3px  0 #b0df2f inset;
  background:-webkit-linear-gradient(top,#3b6512,#90b639);
  background:-moz-linear-gradient(top,#3b6512,#90b639);
  background:-ms-linear-gradient(top,#3b6512,#90b639);
  background:-o-linear-gradient(top,#3b6512,#90b639);
  background:linear-gradient(top,#3b6512,#90b639);
}
.buttons_list li:nth-child(2n) .button{
  font-size: 16px;
}
.buttons_list li .button:after{
  display: inline-block;
  font-size: 18px;
  color: #80b23c;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-shadow:1px 2px 2px rgba(0,0,0,.3);
  border-radius: 12px;
  box-shadow: 0 1px 2px #43641a inset,0 2px 5px #819d5d;
  background: #51791f;
  margin-top: -2px;
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  speak: none;
  text-decoration: inherit;
  content: '\e800';
}
.buttons_list li:nth-child(1) .button:after{
  margin-left:10px;
}
.buttons_list li:nth-child(2) .button:after{
  margin-left:25px;
}
.buttons_list li:nth-child(3) .button:after{
  margin-left:20px;
}
.buttons_list li:nth-child(4) .button:after{
  margin-left:20px;
  margin-top: 0;
  color: #fff;
}
.buttons_list li:not(:last-child) .button:before{
  position: absolute;
  top:5px;
  right: 6px;
  display: inline-block;
  content: "";
  border:1px solid #5f8628;
  width: 30px;
  height: 30px;
  border-radius: 15px;
}
.buttons_list li:nth-child(1) .button:hover{
  background:-webkit-linear-gradient(top,#95c556,#628c2e);
  background:-moz-linear-gradient(top,#95c556,#628c2e);
  background:-ms-linear-gradient(top,#95c556,#628c2e);
  background:-o-linear-gradient(top,#95c556,#628c2e);
  background:linear-gradient(top,#95c556,#628c2e);
}
.buttons_list li:nth-child(2) .button:hover{
  background:-webkit-linear-gradient(top,#bde464,#8cc234 50%,#7fab30 50%,#a3c84e 75%);
  background:-moz-linear-gradient(top,#bde464,#8cc234 50%,#7fab30 50%,#a3c84e 75%);
  background:-ms-linear-gradient(top,#bde464,#8cc234 50%,#7fab30 50%,#a3c84e 75%);
  background:-o-linear-gradient(top,#bde464,#8cc234 50%,#7fab30 50%,#a3c84e 75%);
  background:linear-gradient(top,#bde464,#8cc234 50%,#7fab30 50%,#a3c84e 75%);
}
.buttons_list li:nth-child(3) .button:hover{
  background:-webkit-linear-gradient(top,#b0ea58,#7fbe22);
  background:-moz-linear-gradient(top,#b0ea58,#7fbe22);
  background:-ms-linear-gradient(top,#b0ea58,#7fbe22);
  background:-o-linear-gradient(top,#b0ea58,#7fbe22);
  background:linear-gradient(top,#b0ea58,#7fbe22);
}
.buttons_list li:nth-child(4) .button:hover{
  background:-webkit-linear-gradient(top,#4f7e21,#9fc44b);
  background:-moz-linear-gradient(top,#4f7e21,#9fc44b);
  background:-ms-linear-gradient(top,#4f7e21,#9fc44b);
  background:-o-linear-gradient(top,#4f7e21,#9fc44b);
  background:linear-gradient(top,#4f7e21,#9fc44b);
} 
.buttons_list li:nth-child(1) .button:active{
  top:1px;
  box-shadow:0 1px 2px #496f1c inset,0 1px 0 rgba(0,0,0,0);
  background:-webkit-linear-gradient(top,#628c2e,#628c2e);
  background:-moz-linear-gradient(top,#628c2e,#628c2e);
  background:-ms-linear-gradient(top,#628c2e,#628c2e);
  background:-o-linear-gradient(top,#628c2e,#628c2e);
  background:linear-gradient(top,#628c2e,#628c2e);
}
.buttons_list li:nth-child(2) .button:active{
  box-shadow:0 1px 2px rgba(0,0,0,.3) inset,0 1px 2px rgba(0,0,0,0);
  background:-webkit-linear-gradient(top,#72a22a,#8cc234 50%,#7fab30 50%,#72a22a 75%);
  background:-moz-linear-gradient(top,#72a22a,#8cc234 50%,#7fab30 50%,#72a22a 75%);
  background:-ms-linear-gradient(top,#72a22a,#8cc234 50%,#7fab30 50%,#72a22a 75%);
  background:-o-linear-gradient(top,#72a22a,#8cc234 50%,#7fab30 50%,#72a22a 75%);
  background:linear-gradient(top,#72a22a,#8cc234 50%,#7fab30 50%,#72a22a 75%);
}
.buttons_list li:nth-child(3) .button:active{
   box-shadow:0 1px 2px rgba(0,0,0,.3) inset,0 0 0 6px rgba(0,0,0,.085)，0 0 0 7px rgba(255,255,255,.2);
  background:-webkit-linear-gradient(top,#77b618,#7fbe22);
  background:-moz-linear-gradient(top,#77b618,#7fbe22);
  background:-ms-linear-gradient(top,#77b618,#7fbe22);
  background:-o-linear-gradient(top,#77b618,#7fbe22);
  background:linear-gradient(top,#77b618,#7fbe22);
}
.buttons_list li:nth-child(4) .button:active{
  box-shadow:0 1px 2px rgba(0,0,0,.3) inset;
  background:-webkit-linear-gradient(top,#4f7e21,#9fc44b);
  background:-moz-linear-gradient(top,#4f7e21,#9fc44b);
  background:-ms-linear-gradient(top,#4f7e21,#9fc44b); 
  background:-o-linear-gradient(top,#4f7e21,#9fc44b);
  background:linear-gradient(top,#4f7e21,#9fc44b);
} 
.buttons_list li:not(:first-child) .button:active{
  top:3px;
}
@font-face {
  font-family: 'fontello';
  src: url("font/fontello.eot");
  src: url("font/fontello.eot?#iefix") format('embedded-opentype'), 
	 url("font/fontello.woff") format('woff'), url("../font/fontello.ttf") format('truetype'),
	 url("font/fontello.svg#fontello") format('svg');
  font-weight: normal;
  font-style: normal;
}

demo download

如需转载，烦请注明出处：https://www.fedev.cn/demo/app-button.html

Yung-96 - Silver Metallic