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:

Check the Demo

 

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.