Мне очень понравился урок Sergio Camalich с сайта tympanus.net, поэтому я решил применить его к своему блогу, с некоторыми изминениями. Кому кнопка в уроке№2 показалась слишком простой или скромной, думаю по достоинству оценить сегодняшний урок под названием » анимированная кнопка с помощью псевдо-элементов CSS 3″. Моя анимированная кнопка с помощью псевдо-элементов CSS 3, обрела в себе эфекты из 1 и 4  примеров Sergio Camalich, также я поменял background, добавил ефект для hover, и заменил рисунок стрелки на мини логотип wcdt. Кнопку я уже установил на блог, где вы можете  увидеть, по трогать, по  кликать ее.

И хотя анимированная кнопка с помощью псевдо-элементов CSS 3 уже на сайте, выкладываю скрин ( может дизайн блога измениться, а я забуду про этот урок) :

Анимированная кнопка CSS 3

[spoiler show=»CSS код моей кнопки» hide=»Скрыть код»]
@charset "UTF-8";

.a_demo_four {
	background-color:#3bb3e0;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	text-decoration:none;
	color:#fff;
	position:relative;
	padding:10px 20px;
	padding-right:50px;
	background-image: linear-gradient(bottom, rgb(23,113,142) 0%, rgb(5,182,237) 100%);
	background-image: -o-linear-gradient(bottom, rgb(23,113,142) 0%, rgb(5,182,237) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(23,113,142) 0%, rgb(5,182,237) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(23,113,142) 0%, rgb(5,182,237) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(23,113,142) 0%, rgb(5,182,237) 100%);
	background-image: -webkit-gradient(bottom, rgb(23,113,142) 0%, rgb(5,182,237) 100%);
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(5,182,237)),
	color-stop(1, rgb(5,182,237))
	);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #052756, 0px 10px 5px #999;
	-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #052756, 0px 10px 5px #999;
	-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #052756, 0px 10px 5px #999;
	box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #052756, 0px 10px 5px #999;
}

.a_demo_four:active {
	top:3px;
	background-image: linear-gradient(bottom,  rgb(5,182,237) 0%, rgb(23,113,142) 100%);
	background-image: -o-linear-gradient(bottom, rgb(5,182,237) 0%, rgb(23,113,142) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(5,182,237) 0%, rgb(23,113,142) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(5,182,237) 0%, rgb(23,113,142) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(5,182,237) 0%, rgb(23,113,142) 100%);
	background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(5,182,237)),
	color-stop(1, rgb(23,113,142))
	);
	-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 1px 0px 0px #052756, 0px 5px 3px #999;
	-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 1px 0px 0px #052756, 0px 5px 3px #999;
	-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 1px 0px 0px #052756, 0px 5px 3px #999;
	box-shadow: inset 0px 1px 0px #2ab7ec, 0px 1px 0px 0px #052756, 0px 5px 3px #999;

	}

	.a_demo_four:hover{text-shadow: 0px 1px 1px #02171e;
	background-image: linear-gradient(bottom,  rgb(5,182,237) 0%, rgb(23,113,142) 100%);
	background-image: -o-linear-gradient(bottom, rgb(5,182,237) 0%, rgb(23,113,142) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(5,182,237) 0%, rgb(23,113,142) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(5,182,237) 0%, rgb(23,113,142) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(5,182,237) 0%, rgb(23,113,142) 100%);
	background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(5,182,237)),
	color-stop(1, rgb(23,113,142))
	);
	}

.a_demo_four:before {
	background-image:url(../images/button.png);
	background-repeat:no-repeat;
	background-position:center center;
	content:"";
	width:25px;
	height:25px;
	position:absolute;
	right:15px;
	top:50%;
	margin-top:-11px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	-webkit-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
	-moz-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
	-o-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
	box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
}

.a_demo_four:active::before {
	top:50%;
	margin-top:-14px;
	-webkit-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #052756, 0px 6px 3px #382e29;
	-moz-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #052756, 0px 6px 3px #382e29;
	-o-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #052756, 0px 6px 3px #382e29;
	box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
		}
[/spoiler]

анимированная кнопка с помощью псевдо-элементов CSS 3