www.gusucode.com > 超多款的CSS3响应式按钮特效源码程序 > 超多款的CSS3响应式按钮特效/CSS3动态按钮集锦/CSS3动态按钮集锦/css/style6.css
.a-btn{ width:120px; height:120px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; display:block; margin:20px; float:left; background:#f0ad4e; position:relative; -webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff; -moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff; box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; } .a-btn span{ display:table-cell; width:80px; height:80px; padding:20px; text-align:center; vertical-align:middle; font-size:26px; color:#fff; text-shadow:0px 1px 1px #A03F16; font-family:"Arvo", "Myriad Pro", "Trebuchet MS", sans-serif; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; } .a-btn span:nth-child(1), .a-btn span:nth-child(3){ position:absolute; top:0px; left:0px; font-size:40px; line-height:36px; opacity:0; } .a-btn span:nth-child(1){ background:transparent url(../images/star.png) no-repeat center center; opacity:0.2; } .a-btn:hover{ background:rgba(170, 77, 27, 0.6); -webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff; -moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff; box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff; } .a-btn:hover span:nth-child(3){ opacity:1; } .a-btn:hover span:nth-child(2){ opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); } .a-btn:hover span:nth-child(1){ -webkit-animation:rotate 1s linear; -moz-animation:rotate 1s linear; animation:rotate 1s linear; } .a-btn:active{ -webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff; -moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff; box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff; } .a-btn:active span:nth-child(2){ color:rgba(170, 77, 27, 0.8); text-shadow:0px 1px 1px rgba(255, 255, 255, 0.6); } @keyframes rotate{ 0% { transform: scale(1) rotate(0);} 50% { transform: scale(0.5) rotate(180deg);} 100% { transform: scale(1) rotate(360deg);} } @-webkit-keyframes rotate{ 0% { -webkit-transform: scale(1) rotate(0);} 50% { -webkit-transform: scale(0.5) rotate(180deg);} 100% { -webkit-transform: scale(1) rotate(360deg);} } @-moz-keyframes rotate{ 0% { -moz-transform: scale(1) rotate(0);} 50% { -moz-transform: scale(0.5) rotate(180deg);} 100% { -moz-transform: scale(1) rotate(360deg);} }