css3動畫按鈕

View demo 查看演示Download Source 下載源

Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states.

我仍然對CSS3的可能性大肆宣傳，我想與您分享一些CSS3按鈕實驗。 想法是創(chuàng)建一些具有不同樣式，懸停效果和活動狀態(tài)的動畫鏈接元素。

The icons used in some of the examples are by webiconset.com and the symbol font is by Just Be Nice

在某些示例中使用的圖標由webiconset.com提供，符號字體由Just Be Nice提供

We’ll go through every example and see how the HTML structure looks and what the styles for the normal, the hover and the active states are.

我們將遍歷每個示例，并查看HTML結構的外觀以及正常狀態(tài)，懸停狀態(tài)和活動狀態(tài)的樣式。

Please note that the animations/transitions will only work in browsers that support those CSS3 properties.

請注意，動畫/過渡僅在支持那些CSS3屬性的瀏覽器中有效。

In order not to bloat the tutorial, I will not be using any CSS vendor prefixes. The downloadable files contain them, of course.

為了不使教程過于膨脹，我將不使用任何CSS供應商前綴。 當然，可下載文件包含它們。

例子1 (Example 1)

標記 (Markup)

The structure is pretty straightforward: the icon will be an image and the other elements will be spans:

結構非常簡單：圖標將是圖像，其他元素將是spans：

<a href="#" class="a-btn"><span class="a-btn-slide-text">$29</span><img src="images/icons/1.png" alt="Photos" /><span class="a-btn-text"><small>Available on the Apple</small> App Store</span> <span class="a-btn-icon-right"><span></span></span> </a>

CSS(CSS)

In the style we will make sure that the right transitions are set on the element that we want to animate on hover. The price will be invisible by setting its opacity to 0. Applying mulitple box shadows will allow us to create realistic effects:

在樣式中，我們將確保在要懸停時設置動畫的元素上設置正確的過渡。 通過將其不透明度設置為0，價格將不可見。應用多個框陰影將使我們能夠創(chuàng)建逼真的效果：

.a-btn{background: linear-gradient(top, #a9db80 0%,#96c56f 100%);padding-left: 90px;padding-right: 105px;height: 90px;display: inline-block;position: relative;border: 1px solid #80ab5d;box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);border-radius: 4px;float: left;clear: both;margin: 10px 0px;overflow: hidden;transition: box-shadow 0.3s ease-in-out; } .a-btn img{position: absolute;left: 15px;top: 13px;border: none;transition: all 0.3s ease-in-out; } .a-btn .a-btn-slide-text{position: absolute;font-size: 36px;top: 18px;left: 18px;color: #6d954e;opacity: 0;text-shadow: 0px 1px 1px rgba(255,255,255,0.4);transition: opacity 0.2s ease-in-out; } .a-btn-text{padding-top: 13px;display: block;font-size: 30px;text-shadow: 0px -1px 1px #80ab5d; } .a-btn-text small{display: block;font-size: 11px;letter-spacing: 1px; } .a-btn-icon-right{position: absolute;right: 0px;top: 0px;height: 100%;width: 80px;border-left: 1px solid #80ab5d;box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset; } .a-btn-icon-right span{width: 38px;height: 38px;opacity: 0.7;border-radius: 20px;position: absolute;left: 50%;top: 50%;margin: -20px 0px 0px -20px;border: 1px solid rgba(0,0,0,0.5);background: #4e5c50 url(../images/arrow_down.png) no-repeat center center;box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);transition: all 0.3s ease-in-out; }

When hovering over the buttons we will to change their box shadow and we’ll show the price and fade out the icon:

將鼠標懸停在按鈕上時，我們將更改其框陰影，然后顯示價格并淡出圖標：

.a-btn:hover{box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); } .a-btn:hover img{transform: scale(10);opacity: 0; } .a-btn:hover .a-btn-slide-text, .a-btn:hover .a-btn-icon-right span{opacity: 1; }

The active state will make the button looked pressed with an inset shadow. The arrow icon on the right will be enlarged:

激活狀態(tài)將使按鈕看上去像帶有嵌入式陰影。 右側的箭頭圖標將被放大：

.a-btn:active {position:relative;top:1px;background:#80ab5d;box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;border-color: #a9db80; } .a-btn:active .a-btn-icon-right span{transform: scale(1.4); }

例子2(Example 2)

標記 (Markup)

The markup on this example will be the same like in example 1.

本示例中的標記與示例1中的標記相同。

CSS (CSS)

The styles are almost the same like in example 1, we will just adapt the colors. But, we will do something different on hover. We will make the price scale to its original size (before we have set it to 0) and the icon will disappear. The arrow span will get a red background color:

樣式幾乎與示例1相同，我們只是調整顏色。 但是，我們將在懸停上做一些不同的事情。 我們將價格標尺恢復為其原始大小(在將其設置為0之前)，該圖標將消失。 箭頭范圍將獲得紅色背景色：

.a-btn:hover{box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); } .a-btn:hover img{opacity: 0; } .a-btn:hover .a-btn-slide-text{opacity: 1;transform: scale(1); } .a-btn:hover .a-btn-icon-right span{opacity: 1;background-color: #bc3532; }

The active state will be the same like in the previous example. We will only change the colors. When we press the button, we will also rotate the arrow icon:

活動狀態(tài)將與前面的示例相同。 我們只會更改顏色。 當我們按下按鈕時，我們還將旋轉箭頭圖標：

.a-btn:active {position: relative;top: 1px;background: #5d81ab;box-shadow: 1px 1px 2px rgba(0,0,0,0.4) inset;border-color: #80a9da; } .a-btn:active .a-btn-icon-right span{transform: rotate(360deg); }

例子3(Example 3)

標記 (Markup)

The markup in example 3 will be slightly different than in the previous examples. The text that will slide down will be in the span with the class “a-btn-slide-text”:

示例3中的標記將與之前的示例稍有不同。 將向下滑動的文本將在帶有“ a-btn-slide-text”類的范圍內：

<a href="#" class="a-btn"><span class="a-btn-text">Register now</span> <span class="a-btn-slide-text">Get a promotion</span><span class="a-btn-icon-right"><span></span></span> </a>

CSS(CSS)

In the normal state the button is going to have a specific height that we’ll animate on hover in order to reveal the additional message. The additional message of “a-btn-slide-text” will be positioned absolutely and we will animate its height from 0 to 30px on hover.

在正常狀態(tài)下，按鈕將具有特定的高度，我們將在懸停時為其設置動畫，以顯示其他消息。 附加信息“ a-btn-slide-text”將絕對定位，并且我們將在懸停時對其高度從0到30像素進行動畫處理。

.a-btn{background: linear-gradient(top, #feda71 0%,#febb4a 100%);border: 1px solid #f5b74e;border-color: #f5b74e #e5a73e #d6982f;box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395; padding: 0px 80px 0px 10px;height: 38px;display: inline-block;position: relative;border-radius: 4px;float: left;margin: 10px;overflow: hidden;transition: all 0.3s linear; } .a-btn-text{padding-top: 5px;display: block;font-size: 18px;white-space: nowrap;color: #996633;text-shadow: 0 1px 0 #fedd9b;transition: all 0.3s linear; } .a-btn-slide-text{position:absolute;top: 35px;left: 0px;width: auto;right: 52px;height: 0px;background: #fff;color: #996633;font-size: 13px;white-space: nowrap;font-family: Georgia, serif;font-style: italic;text-indent: 15px;overflow: hidden;line-height: 30px;box-shadow: -1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset;transition: height 0.3s linear; } .a-btn-icon-right{position: absolute;right: 0px;top: 0px;height: 100%;width: 52px;border-left: 1px solid #f5b74e;box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset; } .a-btn-icon-right span{width: 38px;height: 38px;opacity: 0.7;position: absolute;left: 50%;top: 50%;margin: -20px 0px 0px -20px;background: transparent url(../images/arrow_right.png) no-repeat 50% 55%;transition: all 0.3s linear; }

On hover we will change the heights of the button and the additional text element. We’ll also rotate the arrow icon 45 degrees:

懸停時，我們將更改按鈕和其他文本元素的高度。 我們還將箭頭圖標旋轉45度：

.a-btn:hover{height: 65px;box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); } .a-btn:hover .a-btn-text{text-shadow: 0px 1px 1px rgba(0,0,0,0.2);color: #fff; } .a-btn:hover .a-btn-slide-text{height: 30px; } .a-btn:hover .a-btn-icon-right span{opacity: 1;transform: rotate(-45deg); }

The active state will move the button a bit and adjust the colors so that the button seems pressed:

激活狀態(tài)將使按鈕稍微移動并調整顏色，以使按鈕看起來像被按下：

.a-btn:active {position:relative;top:1px;background: linear-gradient(top, #fec354 0%,#fecd61 100%); /* W3C */border-color: #d29a3a #cc9436 #c89133;text-shadow: 0 1px 0 #fee1a0;box-shadow: 0 1px 1px #d4d4d4, inset 0 1px 0 #fed17e; }

例子4(Example 4)

標記 (Markup)

The Markup of this example is the same like in the previous one.

此示例的標記與上一個相同。

CSS (CSS)

Similar to the previous example, the button style will be the following. What we will change is the colors and the position of the additional text element:

與前面的示例類似，按鈕樣式如下。 我們將要更改的是附加文本元素的顏色和位置：

.a-btn{background: linear-gradient(top, #80a9da 0%,#6f97c5 100%);padding-left: 20px;padding-right: 80px;height: 38px;display: inline-block;position: relative;border: 1px solid #5d81ab;box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);border-radius: 20px;float: left;clear: both;margin: 10px 0px;overflow: hidden;transition: all 0.3s linear; } .a-btn-text{padding-top: 5px;display: block;font-size: 18px;white-space: nowrap;text-shadow: 0px 1px 1px rgba(255,255,255,0.3);color: #446388;transition: all 0.2s linear; } .a-btn-slide-text{position:absolute;height: 100%;top: 0px;right: 52px;width: 0px;background: #63707e;text-shadow: 0px -1px 1px #363f49;color: #fff;font-size: 18px;white-space: nowrap;text-transform: uppercase;text-align: left;text-indent: 10px;overflow: hidden;line-height: 38px;box-shadow: -1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;transition: width 0.3s linear; } .a-btn-icon-right{position: absolute;right: 0px;top: 0px;height: 100%;width: 52px;border-left: 1px solid #5d81ab;box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset; } .a-btn-icon-right span{width: 38px;height: 38px;opacity: 0.7;position: absolute;left: 50%;top: 50%;margin: -20px 0px 0px -20px;background: transparent url(../images/arrow_right.png) no-repeat 50% 55%;transition: all 0.3s linear; }

On hover we will increase the right padding of the button and also the width of the “a-btn-slide-text” span:

懸停時，我們將增加按鈕的右填充以及“ a-btn-slide-text”跨度的寬度：

.a-btn:hover{padding-right: 180px;box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); } .a-btn:hover .a-btn-text{text-shadow: 0px 1px 1px #5d81ab;color: #fff; } .a-btn:hover .a-btn-slide-text{width: 100px; } .a-btn:hover .a-btn-icon-right span{opacity: 1; }

The active state will again look pressed with the help of an inset shadow and an additional pixel down:

借助插入陰影和向下的附加像素，再次將處于活動狀態(tài)的按鈕按下：

.a-btn:active {position: relative;top: 1px;background: #5d81ab;box-shadow: 1px 1px 2px rgba(0,0,0,0.4) inset;border-color: #80a9da; }

例子5(Example 5)

標記 (Markup)

The structure will consist of 4 span elements inside of the button link. The span with the class “a-btn-slide-icon” will be the animated arrow that will move from up to down.

該結構將在按鈕鏈接內部包含4個span元素。 類為“ a-btn-slide-icon”的跨度將是動畫箭頭，它將從上向下移動。

<a href="#" class="a-btn"><span class="a-btn-symbol">Z</span><span class="a-btn-text">Download Now</span> <span class="a-btn-slide-text">Windows Vista / Windows 7</span><span class="a-btn-slide-icon"></span> </a>

CSS(CSS)

Since we will be using a font to display the icons on the left side, we will have to include the font. We will hide the arrow by setting it’s top value to -30px.

因為我們將使用一種字體在左側顯示圖標，所以我們將必須包括該字體。 通過將箭頭的最高值設置為-30px，可以隱藏箭頭。

@font-face {font-family: 'WebSymbolsRegular';src: url('websymbols/websymbols-regular-webfont.eot');src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),url('websymbols/websymbols-regular-webfont.woff') format('woff'),url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');font-weight: normal;font-style: normal; } .a-btn{border-radius: 50px;padding: 10px 30px 10px 70px;position: relative;float:left;display: block;overflow: hidden;margin: 10px;background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 74%,rgba(237,237,237,1) 100%);box-shadow: 0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1);transition: box-shadow 0.3s ease-in-out; } .a-btn-symbol{font-family: 'WebSymbolsRegular', cursive;color: #555;font-size: 20px;text-shadow: 1px 1px 2px rgba(255,255,255,0.5);position:absolute;left: 20px;line-height: 32px;transition: opacity 0.3s ease-in-out; } .a-btn-text{font-size: 20px;color: #d7565b;line-height: 16px;font-weight: bold;font-family: "Myriad Pro", "Trebuchet MS", sans-serif;text-shadow: 1px 1px 2px rgba(255,255,255,0.5);display: block; } .a-btn-slide-text{font-family: Arial, sans-serif;font-size: 10px;letter-spacing: 1px;text-transform: uppercase;color: #555;text-shadow: 0px 1px 1px rgba(255,255,255,0.9); } .a-btn-slide-icon{position:absolute;top:-30px;width: 22px;height: 22px;background: transparent url(../images/arrow_down_black.png) no-repeat top left;left:20px;opacity: 0.4; }

On hover we will fade out the icon on the left and play the animation for the arrow infinitely:

懸停時，我們將淡出左側的圖標，并無限播放箭頭的動畫：

.a-btn:hover{background: #fff;box-shadow: 0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1); } .a-btn:hover .a-btn-symbol{opacity: 0; } .a-btn:hover .a-btn-slide-icon{-webkit-animation: slideDown 0.9s linear infinite; }

When pressing the button, we will make the button red and look pressed by giving it an inset shadow:

當按下按鈕時，我們將按鈕變成紅色，并通過給它一個嵌入陰影使其看起來被按下：

.a-btn:active{background: #d7565b;box-shadow: 0px 2px 2px rgba(0,0,0,0.6) inset, 0px 0px 0px 1px rgba(188,188,188,0.1); } .a-btn:active .a-btn-text{color: #fff;text-shadow: 0px 1px 1px rgba(0,0,0,0.3); } .a-btn:active .a-btn-slide-text{color: rgba(0,0,0,0.4);text-shadow: none; }

And finally, the simple animation for moving the arrow from up to down:

最后，是將箭頭從上到下移動的簡單動畫：

@keyframes slideDown {0% { top: -30px; }100% { top: 80px;} }

例子6(Example 6)

標記 (Markup)

We will have three spans in our button link. The last one will be the hidden text that shows on hover.

我們的按鈕鏈接中將包含三個范圍。 最后一個是懸停時顯示的隱藏文本。

<a href="#" class="a-btn"><span></span><span>Sign up</span><span>It's free!</span> </a>

CSS(CSS)

We’ll play a bit with nth-child in this example. Since we have 3 spans, we’ll need to address them as .a-btn span:nth-child(1), .a-btn span:nth-child(2) and .a-btn span:nth-child(3).

在此示例中，我們將與nth-child一起玩。 由于我們有3個跨度，因此需要將它們命名為.a-btn span：nth-??child(1) ，.a-btn span：nth-??child(2)和.a-btn span：nth-??child( 3) 。

We’ll make the button circular and add some really fancy box shadows to it. In order to center the main text vertically, we will set its display to table-cell. The star and the hidden text will be positioned absolutely.

我們將使按鈕變?yōu)閳A形，并向其中添加一些非常精美的框陰影。 為了使主文本垂直居中，我們將其顯示設置為表格單元。 星號和隱藏的文本將絕對定位。

.a-btn{width: 120px;height: 120px;border-radius: 50%;display: block;margin: 20px;float: left;background: #f0ad4e;position: relative;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;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;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; }

On hover we will change the box shadow of the button so that it appears lifted. The hidden text will be faded in and we’ll apply the flyOut animation to the initial text. We’ll apply the rotate animation to the star:

懸停時，我們將更改按鈕的框形陰影，使其看起來已抬起。 隱藏的文本將被淡入，我們將把flyOut動畫應用于初始文本。 我們將旋轉動畫應用于星星：

.a-btn:hover{background: rgba(170, 77, 27, 0.6);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){transform: scale(0);opacity: 0; } .a-btn:hover span:nth-child(1){animation: rotate 1s linear; }

Let’s make the button look pressed when clicking on it:

讓我們在單擊按鈕時使其看起來按下：

.a-btn:active{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); }

The rotate/pulse animation looks as follows:

旋轉/脈沖動畫如下所示：

@-webkit-keyframes rotate{0% { transform: scale(1) rotate(0);}50% { transform: scale(0.5) rotate(180deg);}100% { transform: scale(1) rotate(360deg);} }

例子7(Example 7)

標記 (Markup)

The structure will be the same like in example 5.

結構將與示例5相同。

CSS (CSS)

The style will be very similar to example 5, we’ll just adjust some colors and shadows:

樣式將與示例5非常相似，我們只需要調整一些顏色和陰影即可：

.a-btn{border-radius: 10px;padding: 10px 30px 10px 70px;position: relative;float:left;display: block;overflow: hidden;margin: 10px;background: linear-gradient(top, #b7f2f4 0%,#7ce7ea 100%);border: 1px solid #90c6c8;border-color: #90c6c8 #78bdc0 #65b6ba;box-shadow: 0px -5px 0px 0px #458a8c, 0 1px 1px #d5d5d5, 0 1px 0 rgba(255,255,255,0.8) inset; transition: all 0.2s linear; } .a-btn-symbol{font-family: 'WebSymbolsRegular', cursive;color: #437b7d;text-shadow: 0 1px 0 #bef3f5;font-size: 20px;position:absolute;left: 20px;width: 20px;text-align: center;line-height: 32px;transition: all 0.3s ease-in-out; } .a-btn-text{font-size: 20px;color: #437b7d;text-shadow: 0 1px 0 #bef3f5;line-height: 16px;font-weight: bold;font-family: "Myriad Pro", "Trebuchet MS", sans-serif;display: block; } .a-btn-slide-text{font-family: Arial, sans-serif;font-size: 10px;letter-spacing: 1px;text-transform: uppercase;color: #555;text-shadow: 0px 1px 1px rgba(255,255,255,0.9); }

On hover we will enlarge the button and rotate the little icon:

懸停時，我們將放大按鈕并旋轉小圖標：

.a-btn:hover{transform: scale(1.05); } .a-btn:hover .a-btn-symbol{opacity: 0.5;transform: rotate(360deg); }

When clicking the button, we will make the button smaller and press it by adjusting the box shadow:

單擊按鈕時，我們將使按鈕變小并通過調整框陰影將其按下：

.a-btn:active{transform: scale(0.95);box-shadow: 0px 0px 0px 1px #458a8c, 0 1px 1px #d5d5d5, inset 0 1px 0 rgba(255,255,255,0.8),0px 1px 1px 2px #fff; }

And that’s it! I hope you enjoyed creating some crazy buttons with CSS3 and got inspired!

就是這樣！ 希望您喜歡使用CSS3創(chuàng)建一些瘋狂的按鈕并獲得啟發(fā)！

一些參考 (Some References)

Add to Cart Buttons (PSD) Simple CSS3 Button Ultimate CSS Gradient Generator

添加到購物車按鈕(PSD)簡單CSS3按鈕Ultimate CSS漸變生成器

翻譯自: https://tympanus.net/codrops/2011/11/07/animated-buttons-with-css3/

css3動畫按鈕

總結

以上是生活随笔為你收集整理的css3动画按钮_CSS3的动画按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。