A Pen by Moncho Varela.

1/14/2014 - 7:49 PM

/* = more-arrow
-----------------*/
.more-arrow{
  position:relative;
  width:100%;
  display:block;
  border:0.07em solid #C7C4C4;
  margin:25px 0;
  padding:0;
  /*animation*/
  -webkit-animation:moveArrow 2s 1 ease;
  -moz-animation:moveArrow 2s 1 ease;
  -ms-animation:moveArrow 2s 1 ease;
  -o-animation:moveArrow 2s 1 ease;
  animation:moveArrow 2s 1 ease;
}
.more-arrow:before{
  content:"Read more";
  position:absolute;
  left:-1px;
  top:-9px;
  width:50px;
  line-height:1.5;
  padding-right:5px;
  display:block;
  border:0.2em solid #E2E2E2;
  background:#fdfdfd;
  color:#666;
  /*border-radius*/
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
  text-align:right;
  font-size:x-small;
}
.more-arrow:hover:before{
  border-color:#e74c3c;
  color:#e74c3c;
}
.more-arrow:before,.more-arrow:hover:before{
  -webkit-transition:all 0.8s ease;
  -moz-transition:all 0.8s ease;
  -o-transition:all 0.8s ease;
  transition:all 0.8s ease;
}
@-webkit-keyframes moveArrow{
  0%{width:0%;}
}
@-moz-keyframes moveArrow{
  0%{width:0%;}
}
@-o-keyframes moveArrow{
  0%{width:0%;}
}
@-ms-keyframes moveArrow{
  0%{width:0%;}
}
@keyframes moveArrow{
  0%{width:0%;}
}


/* = more-center
-----------------*/
.more-center{
  position:relative;
  width:100%;
  display:block;
  border:1px solid #C7C4C4;
  margin:25px 0;
  padding:0;
}
.more-center:before{
  content:"Read more";
  position:absolute;
  right:50%;
  top:-9px;
  width:50px;
  margin-right:-25px;
  line-height:1.5;
  padding: 0 1% 0 1%;
  text-align:center;
  font-size:x-small;
  display:block;
  border:0.2em solid #E2E2E2;
  background:#fdfdfd;
  color:#666;
  /*border-radius*/
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  /*animation*/
  -webkit-animation:moveCenter 2s 1 ease-in-out;
  -moz-animation:moveCenter 2s 1 ease-in-out;
  -ms-animation:moveCenter 2s 1 ease-in-out;
  -o-animation:moveCenter 2s 1 ease-in-out;
  animation:moveCenter 2s 1 ease-in-out;
}
.more-center:hover:before{
  border-color:#e74c3c;
  color:#e74c3c;
}
.more-center:before,.more-center:hover:before{
  -webkit-transition:all 0.8s ease;
  -moz-transition:all 0.8s ease;
  -o-transition:all 0.8s ease;
  transition:all 0.8s ease;
}
@-webkit-keyframes moveCenter{
  50%{width:90%;right:5%;margin-right:0;}
}
@-moz-keyframes moveCenter{
  50%{width:90%;right:5%;margin-right:0;}
}
@-o-keyframes moveCenter{
  50%{width:90%;right:5%;margin-right:0;}
}
@-ms-keyframes moveCenter{
  50%{width:90%;right:5%;margin-right:0;}
}
@keyframes moveCenter{
  50%{width:90%;right:5%;margin-right:0;}
}

/* = more-left
-----------------*/
.more-left{
  position:relative;
  width:100%;
  display:block;
  border:1px solid #C7C4C4;
  margin:25px 0;
  padding:0;
}
.more-left:before{
  content:"Read more";
  position:absolute;
  left:-1px;
  top:-9px;
  width:50px;
  line-height:1.5;
  padding-right:5px;
  display:block;
  border:0.2em solid #E2E2E2;
  background:#fdfdfd;
  color:#666;
  /*border-radius*/
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  text-align:right;
  font-size:x-small;
  /*animation*/
  -webkit-animation:moveRight 2s 1 ease-in-out;
  -moz-animation:moveRight 2s 1 ease-in-out;
  -ms-animation:moveRight 2s 1 ease-in-out;
  -o-animation:moveRight 2s 1 ease-in-out;
  animation:moveRight 2s 1 ease-in-out;
}
.more-left:hover:before{
  border-color:#e74c3c;
  color:#e74c3c;
}
.more-left:before,.more-left:hover:before{
  -webkit-transition:all 0.8s ease;
  -moz-transition:all 0.8s ease;
  -o-transition:all 0.8s ease;
  transition:all 0.8s ease;
}
@-webkit-keyframes moveRight{
  50%{left:90%;}
}
@-moz-keyframes moveRight{
  50%{left:90%;}
}
@-o-keyframes moveRight{
  50%{left:90%;}
}
@-ms-keyframes moveRight{
  50%{left:90%;}
}
@keyframes moveRight{
  50%{left:90%;}
}



/* = more-right
-----------------*/
.more-right{
  position:relative;
  width:100%;
  display:block;
  border:1px solid #C7C4C4;
  margin:25px 0;
  padding:0;
}
.more-right:before{
  content:"Read more";
  position:absolute;
  right:-1px;
  top:-9px;
  width:50px;
  line-height:1.5;
  padding-left:6px;
  text-align:left;
  font-size:x-small;
  display:block;
  border:0.2em solid #E2E2E2;
  background:#fdfdfd;
  color:#666;
  /*border-radius*/
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  /*animation*/
  -webkit-animation:moveLeft 2s 1 ease-in-out;
  -moz-animation:moveLeft 2s 1 ease-in-out;
  -ms-animation:moveLeft 2s 1 ease-in-out;
  -o-animation:moveLeft 2s 1 ease-in-out;
  animation:moveLeft 2s 1 ease-in-out;
}
.more-right:hover:before{
  border-color:#e74c3c;
  color:#e74c3c;
}
.more-right:before,.more-right:hover:before{
  -webkit-transition:all 0.8s ease;
  -moz-transition:all 0.8s ease;
  -o-transition:all 0.8s ease;
  transition:all 0.8s ease;
}
@-webkit-keyframes moveLeft{
  50%{right:90%;}
}
@-moz-keyframes moveLeft{
  50%{right:90%;}
}
@-o-keyframes moveLeft{
  50%{right:90%;}
}
@-ms-keyframes moveLeft{
  50%{right:90%;}
}
@keyframes moveLeft{ 
  50%{right:90%;}
}





/*  = Demo style
-------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,a,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;  
  box-sizing: border-box; 
  margin: 0;
  padding: 0;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
  display: block;
}
section{
  width:90%;
  margin:5% auto;
  padding:0;
}
article,header{
  padding:1%;
}
h1{
  font-size: 100%;
}

h1,h2{
  display:block;
  font-weight: 300;
  color: #999;
  letter-spacing: 1px;
  line-height: 1;
  margin:2px;
  text-align:center;
}
h1 {
  font-size: 28px;
  color:#333;
}
p {
  margin-top: 18px;
  color:#555;
}
.menu{
  display:block;
  width:100%;
  margin:4% auto;
  text-align:center;
}
.menu a{
  text-decoration:none;
  background:#fff;
  border:1px solid #555;
  color:#555;
  padding:6px;
  font-family:monospace;
  font-size:small;
}
.menu a:hover{
  border:1px solid #e74c3c;
  color:#e74c3c;
}
.menu a:hover,.menu a{
    /*transition*/
  -webkit-transition:all 0.8s ease;
  -moz-transition:all 0.8s ease;
  -o-transition:all 0.8s ease;
  transition:all 0.8s ease;
}

script.js

/* Only for demo */
var demo = function(el){
  return document.querySelector(el);
},
    box = demo('.box'),
    
    tmpl_one = '<section><header><h1>Example One</h1></header><article><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! </p><a href="#" class="more-arrow" ></a></article></section><section><header><h1>Example One</h1></header><article><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! </p><a href="#" class="more-arrow" ></a></article></section>',
    
    tmpl_two = '<section><header><h1>Example Two</h1></header><article><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! </p><a href="#" class="more-center" ></a></article></section><section><header><h1>Example Two</h1></header><article><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! </p><a href="#" class="more-center" ></a></article></section>',
    
    tmpl_three = '<section><header><h1>Example Three</h1></header><article><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! </p><a href="#" class="more-left" ></a></article></section><section><header><h1>Example Three</h1></header><article><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! </p><a href="#" class="more-left" ></a></article></section>',
    
    tmpl_four = '<section><header><h1>Example Four</h1></header><article><p> Lorem ipsum dolor sit amet, conectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! </p><a href="#" class="more-right" ></a></article></section><section><header><h1>Example Four</h1></header><article><p> Lorem ipsum dolor sit amet, conectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! </p><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ullam placeat officiis ipsa facilis quia nemo ea esse nostrum ipsum distinctio voluptate id blanditiis minima voluptatibus obcaecati perferendis ratione deserunt! </p><a href="#" class="more-right" ></a></article></section>';


box.innerHTML = tmpl_one;

demo('.demo_one').addEventListener('click',function(){
  box.innerHTML = tmpl_one;
});
demo('.demo_two').addEventListener('click',function(){
  box.innerHTML = tmpl_two;
});
demo('.demo_three').addEventListener('click',function(){
  box.innerHTML = tmpl_three;
});
demo('.demo_four').addEventListener('click',function(){
  box.innerHTML = tmpl_four;
});

index.html

<h1>~ Custom Read More Button. ~</h1>
<h2>Make with love. </h2>
<div class="menu">
  <a href="#" class="demo_one">Demo One</a>
  <a href="#" class="demo_two">Demo Two</a>
  <a href="#" class="demo_three">Demo Three</a>
  <a href="#" class="demo_four">Demo Four</a>
</div>

<div class="box"></div>

Custom-read-more-btn..markdown

Rendered
Source

Custom read more btn.

A Pen by Moncho Varela on CodePen.

License.

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

A Pen by Moncho Varela.

Custom read more btn.