Firefox Marketplace动画按钮-白红宇

The is an incredibly attractive, easy to use hub that promises to make finding and promoting awesome HTML5-powered web applications easy and convenient. While I don't work directly on the Marketplace, I am privy to the codebase (and ). One of the well written and elegant touches to the site is its animated button. They are comprised completely of CSS and achieve a great effect by animating box-shadow and line-height.

是一个非常吸引人的，易于使用的中心，它有望使查找和推广基于HTML5的超赞Web应用程序变得轻松便捷。虽然我不直接在Marketplace上工作，但我对代码库有所了解( 也是 )。该网站的文字写法精美，风格优美，是其动画按钮。它们完全由CSS组成，并且通过对box-shadow和line-height动画效果达到了很好的效果。

HTML (The HTML)

These styles can be applied to A elements with the button class or actual BUTTON elements:

这些样式可以应用于具有按钮类的A元素或实际的BUTTON元素：

Arsenal Arsenal Arsenal

Since BUTTON elements have had styling quirks in the past, you'll want to use A elements everywhere outside of forms.

由于BUTTON元素过去曾有样式怪癖，因此您将希望在表单之外的任何地方使用A元素。

CSS (The CSS)

There's a lot of CSS in the basic element state, but I kept all of it to keep my demo true to the Marketplace button. Here's the magic:

基本元素状态下有很多CSS，但是为了使我的演示完全符合Marketplace按钮，我保留了所有这些内容。这是魔术：

a.button:link,a.button:visited,button,input[type=submit],input[type=button] {	border: 0;	color: white;	display: inline-block;	font: 600 16px/31px "Open Sans","Helvetica Neue",Arial,sans-serif;	height: 32px;	background-color: 	#267CC2;	padding: 0 24px;	position: relative;	text-align: center;	text-decoration: none;	text-shadow: 0 1px 0 rgba(0, 0, 0, .25);	white-space: nowrap;	border-radius: .5em;	box-shadow: 0 2px 1px rgba(0, 0, 0, .2), inset 0 -1px 0 rgba(0, 0, 0, .2), inset 0 1px 0 0 rgba(255, 255, 255, .2);	background-color: #267CC2;	background-image: linear-gradient(#42A5E1, #267CC2);	transition-property: -moz-box-shadow,-webkit-box-shadow,box-shadow,line-height;	transition-duration: .2s,.2s,.2s,.2s;}a.button:hover,a.button:focus,button:hover,button:focus,input[type=submit]:hover,input[type=button]:hover,input[type=submit]:focus,input[type=button]:focus {    box-shadow: 0 4px 1px rgba(0, 0, 0, 0.2), 0 -3px 0 rgba(0, 0, 0, 0.2) inset;	line-height: 28px;	text-decoration: none;}a.button:active, button.button:active {    box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, .2), inset 0 12px 24px 6px rgba(0, 0, 0, .2), inset 0 0 2px 2px rgba(0, 0, 0, .2);	transition-duration: .1s,.1s,.1s,.1s;	line-height: 34px;}

As you can probably guess, the original CSS was generated using a preprocessor (LESS, in this case). As with any piece of expertly written code, there isn't too much to explain. The animated transition is applied to box-shadow and line-height properties and the :active and :hover states trigger the animations.

您可能会猜到，原始CSS是使用预处理程序(在这种情况下为LESS)生成的。与任何一段专业编写的代码一样，没有太多要解释的内容。动画过渡将应用于box-shadow和line-height属性，并且:active和:hover状态将触发动画。

I love what the AMO and Marketplace team has done with this subtle effect. Not only is the effect smooth and unique, it requires no JavaScript and uses what have now become standard effect techniques. Love it!

我喜欢AMO和Marketplace团队在这种微妙效果方面所做的工作。效果不仅流畅，独特，而且不需要JavaScript，并使用现在已成为标准效果技术的技术。爱它！

翻译自: