Варианты оформления ссылки "Читать далее"

by Andrey Dobrovoi

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="block drop-shadow">
  <h1>Заливка <span>кнопка #1</span></h1>
    <a class="rectangle pink" data-text="читать далее" href="#">читать далее</a>
    <a class="rectangle purple" data-text="читать далее" href="#">читать далее</a>
    <a class="rectangle blue" data-text="читать далее" href="#">читать далее</a>
    <a class="rectangle yelow" data-text="читать далее" href="#">читать далее</a>
    <a class="rectangle green" data-text="читать далее" href="#">читать далее</a>
</div>
<div class="block drop-shadow">
  <h1>Заливка <span>кнопка #2</span></h1>
    <a class="hover pink" data-text="#читать далее" href="#">#читать далее</a>
    <a class="hover purple" data-text="#читать далее" href="#">#читать далее</a>
    <a class="hover blue" data-text="#читать далее" href="#">#читать далее</a>
    <a class="hover yelow" data-text="#читать далее" href="#">#читать далее</a>
    <a class="hover green" data-text="#читать далее" href="#">#читать далее</a>
</div>
<div class="block drop-shadow">
  <h1>Заливка <span>кнопка #3</span></h1>
    <a class="doorout pink" data-text="читать далее" href="#">читать далее</a>
    <a class="doorout purple" data-text="читать далее" href="#">читать далее</a>
    <a class="doorout blue" data-text="читать далее" href="#">читать далее</a>
    <a class="doorout yelow" data-text="читать далее" href="#">читать далее</a>
    <a class="doorout green" data-text="читать далее" href="#">читать далее</a>
</div>
<div class="block drop-shadow">
  <h1>Заливка <span>кнопка #4</span></h1>
    <a class="doorin pink" data-text="читать далее" href="#">читать далее</a>
    <a class="doorin purple" data-text="читать далее" href="#">читать далее</a>
    <a class="doorin blue" data-text="читать далее" href="#">читать далее</a>
    <a class="doorin yelow" data-text="читать далее" href="#">читать далее</a>
    <a class="doorin green" data-text="читать далее"...

CSS

@charset "UTF-8";
@import "http://webfonts.ru/import/osans.css";
*{
	margin:0em;
	padding:0em;
}

body{
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	background: #403833;
	font-family: 'Open Sans';
	font-weight: 100;
	font-size:100%;
	margin:0em;
	padding:0em;
}

h1{
  position:relative;
  font-size:1.5em;
  font-weight:600;
  color:#403833;
  margin:-1em 0px 0.75em 0px;;
}

h1 span{
  font-weight:300;
}

.block{
  position:relative;
  max-width:960px;
  background:#fff;
  margin: 2.5em auto;
  padding:2.5em;
  text-align:center;
}

.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   max-width:300px;
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}

.drop-shadow:after{
   right:10px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
 }
/* Базовые стили кнопок
 * Цветовые вариации */

/* розовый */
.pink:hover{
    border:0.0625em solid rgba(239,33,74,1);
	background:rgba(239,33,74,0.75);
	color:rgba(239,33,74,1);
}

.pink:hover:before{
    border:0.0625em solid rgba(239,33,74,1);
	color:rgba(239,33,74,1);
}

.pink:hover:after{
    border:0.0625em solid rgba(239,33,74,1);
	color:rgba(239,33,74,1);
	background:rgba(239,33,74,1);
}

.pink:before{
	background:rgba(239,33,74,1);
	border:0.0625em solid rgba(239,33,74,1);
} 
 
.pink:after{
	background:rgba(239,33,74,1);
	border:0.0625em solid rgba(239,33,74,1);
} 

.purple:hover{
    border:0.0625em solid rgba(112,52,84,1);
	background:rgba(112,52,84,0.75);
	color:rgba(112,52,84,0.75);
}

.purple:hover:before{
    border:0.0625em solid...