藤藤每日一练——CSS3 Button Pink

今天这个案例是使用CSS3的常用属性制作的一个ICON圆开按钮效果，在这个案例中使用@font-face属性制作了三个浏览器的icon(chrom/firefox/ie)，使用gradient制作的径向渐变效果，并且使用box-shadow实现立体效果，用text-shadow制作的icon发光效果，详细的可以看代码。

demodownload

HTML 结构

<button type="button" class="button"></button>
<button type="button" class="button"></button>
<button type="button" class="button"></button>

CSS代码

body{
  background-color: #d97398;
}
.controls_button{
  width: 400px;
  margin:40px auto;
}
.button{
  width: 70px;
  height: 70px;
  margin-right: 90px;
  border-radius: 35px;
  border:none;
  box-shadow: 0 1px 5px rgba(255,255,255,.5) inset,0 -2px 5px rgba(0,0,0,.3) inset,0 3px 8px rgba(0,0,0,.8);
  background: -webkit-radial-gradient(top center, circle, #f28fb8, #e982ad, #ec568c);
  background: -moz-radial-gradient(top center, circle, #f28fb8, #e982ad, #ec568c);
  background: -ms-radial-gradient(top center, circle, #f28fb8, #e982ad, #ec568c);
  background: -o-radial-gradient(top center, circle, #f28fb8, #e982ad, #ec568c);
  background: radial-gradient(top center, circle, #f28fb8, #e982ad, #ec568c);
}
.button:nth-child(3){
  margin-right: 0;
}
.button:after{
  font-family: 'icomoon';
  speak: none;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 36px;
  content: "\21";
  color: #dd5183;
  text-shadow:0 3px 10px #f1a2c1,0 -3px 10px #f1a2c1;
}
.button:nth-child(2):after{
  content: "\22";
}
.button:nth-child(3):after{
  content: "\23";
}
.button:hover:after{
  color: #fff;
  text-shadow:0 1px 20px #fccdda, 1px 0 14px #fccdda;
}
.button:active{
  box-shadow: 0 2px 7px rgba(0,0,0,.5) inset,0 -3px 10px rgba(0,0,0,.1) inset,0 1px 3px rgba(255,255,255,.5);
  background: -webkit-radial-gradient(top center, circle, #f28fb8, #e982ad, #ec568c);
  background: -moz-radial-gradient(top center, circle, #f28fb8, #e982ad, #ec568c);
  background: -ms-radial-gradient(top center, circle, #f28fb8, #e982ad, #ec568c);
  background: -o-radial-gradient(top center, circle, #f28fb8, #e982ad, #ec568c);
  background: radial-gradient(top center, circle, #f28fb8, #e982ad, #ec568c);
}
@font-face {
  font-family: 'icomoon';
  src:url('fonts/icomoon.eot');
  src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
	url('fonts/icomoon.svg#icomoon') format('svg'),
	url('fonts/icomoon.woff') format('woff'),
	url('fonts/icomoon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/css3-button-pink.html