In today’s example we will study the “borin-ol-button” again and how to make cool gradient only using CSS3 gradient.
The principle is that we will create a separate background (with gradient) that is positioned in the button along side the text element that is above that background.
The trick here is to put overflow:hidden on button tag, that property will then hide any excessive background that would “stick-out” from the button.
Check the demo here:
[button2 type=”default” size=”large” url2=”http://testing.2gika.si/article-gradient-button/”]Check the Demo[/button2]
We will also test some key-frame animation on when you click the button.
Technologies: Stylus (CSS preprocessor) and HTML
CSS3 Gradient
In this example, we will exaggerate the use of gradient – so it is completely obvious … in real case, we would use a much subtler variant.
The button html
<button> <span class="btn-text"> Button </span> <span class="btn-bg"></span> </button>
The Stylus (CSS)
This is the whole code, including the on-click shaking animation.
blue = #3498DB button font-size 10px font-weight 400 background blue padding 20px 40px color white text-transform uppercase margin-bottom 20px border none border-radius 3px cursor pointer border none position relative overflow hidden margin 0px auto width 200px display block .btn-bg background linear-gradient(to bottom, lighten(blue,80%), lighten(blue,0%)) position absolute top -100% left 0px width 100% height 200% transition all 500ms ease &:hover .btn-bg transition 0.3s all ease top -150% .btn-text position relative z-index 1 &:focus outline none &:active animation shakeBtn 20ms infinite .btn-bg top -90% @keyframes shakeBtn 0% left -2px top -2px 50% right -2px top 2px 100% left 0px top 0px
We will be exploring more cases like this in the future .. stay tuned and take care.