Border Around 'Read More' Box

• 

  xfivefeetsmallx · Member · Jul 28, 2016 at 4:17 pm

  • Copy link
  • Add topic to favorites

  Hi there – Newbie to CSS / html. Can someone tell me how I add a border to my ‘Continue Reading’ tag so it looks more like a button than just text? Thank you!

  The blog I need help with is: (visible only to logged in users)

• 

  hallluke · Member · Jul 28, 2016 at 6:11 pm

  • Copy link

  Hi, add this to your existing custom CSS and see what you think. You can mess around with your own values, it should be pretty self explanatory.

  a.more-link {
  	font-size: 0.7em;
  	letter-spacing: 0.02em;
  	border: 1px solid #6d6d6d;
  	padding: 5px 10px;
  	background-color: #eee;
  	border-radius: 15px;
  	box-shadow: 0 4px #aaa;
  }
  a.more-link:hover {
  	color: #6d6d6d;
  	text-decoration: none;
  	background-color: #ddd;
  }
  a.more-link:active {
  	box-shadow: 0 2px #666;
  	transform: translateY(2px);
  }