Create linkable Buttons on my site

steperenko · June 4, 2015

Hello.
I am working on my client pages. Here is what I have in mind: A client opens their gallery and they see their photos and links to products that I sell. I figured out how to include the links. I am struggling with layout. I would like the "links" to be buttons instead of plain text. I cannot seem to adjust the container width for each link. They are all scattered on the page ( I got them to be in the same line, but the width is not aligning). I would love to have my buttons on the side (right) if possible, instead of above or below. That is a minor issue at the moment though, I prefer buttons and width done over location.

I would love it if I could get the buttons to match the colors of my site. I am sure there is a code for that. I am a self taught beginner and would really appreciate a step by step easy explanation on how to make my site prettier.Linking to a page so that you can see what it looks like now.http://www.ksteppingphotography.com/Category/Seniors

Thank you!

Lille Ulven · June 4, 2015

Hei steperenko.

You would need to surround your links in your html that you want to turn into buttons with button-tags like this (the example is from my blog, but it works in smugmug I tested it on one of my test-pages)

<button class="my_button"><a href='http://blog.lilleulven.com/2015/05/mount-eden.html'>«Mount Eden</a></button>

To make this look like a proper button you would then have to add some css, to define how your new class named "my_button" is going to look like:

.my_button {
  height: 36px;
  font-size: 18px;
  font: $(body.font);
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 2px;
  color: #222;
  font: 11px arial;
  font-weight: bold;
  height: 27px;
  margin: 1px 0 0 15px;
  padding-bottom: 0;
  text-align: center;
  text-shadow: 0 1px rgba(0,0,0,.1);
  vertical-align: top;
/*width: 75px;*/
  -moz-border-radius: 2px;
  -webkit-appearance: none;
}

Good luck

Lille Ulven

steperenko · June 4, 2015

Thank you
Thank you. I will try your code

steperenko · June 4, 2015

Hm, It doesn' t look like a button, what is amiss?

Hikin' Mike · June 5, 2015

I would use one HTML/CSS block and add this:

HTML
[html]
<div class="product">

<span>WALL DISPLAYS</span>

<ul>

<li class="button"><a href="http://www.link-here.com">Collage Wall Displays</a></li>

<li class="button"><a href="http://www.link-here.com">Stand-out Wall Mounts</a></li>

</ul>

<span>Metal Prints</span>

<ul>

<li class="button"><a href="http://www.link-here.com">Canvas</a></li>

<li class="button"><a href="http://www.link-here.com">Thin Wraps</a></li>

</ul>

<span>PHOTO ALBUMS</span>

<ul>

<li class="button"><a href="http://www.link-here.com">Lay Flat Press Book</a></li>

<li class="button"><a href="http://www.link-here.com">Signature Albums</a></li>

<li class="button"><a href="http://www.link-here.com">Accordion Book</a></li>

</ul>

<span>SENIOR ANNOUNCEMENTS</span>

<ul>

<li class="button"><a href="http://www.link-here.com">General Information</a></li>

<li class="button"><a href="http://www.link-here.com">Types and Pricing</a></li>

<li class="button"><a href="http://www.link-here.com">Designs - HERS</a></li>

<li class="button"><a href="http://www.link-here.com">Designs - His</a></li>

<li class="button"><a href="http://www.link-here.com">Newest Designs</a></li>

</ul>

</div>
[/html]

CSS

.product span {
	font-size: 1em;
	color: #000;
	}
	
.button {
	margin: 5px 0 20px;
	}

.button a {
	padding: 5px 10px;
	background: #ffadad;
	color: #000;
	border: 1px solid #f00;
	border-radius: 5px;
	-webkit-transition: all .5s ease-in-out;
	   -moz-transition: all .5s ease-in-out;
	     -o-transition: all .5s ease-in-out;
	        transition: all .5s ease-in-out;
	}
	
.button a:hover {
	background: #f00;
	color: #fff;
	text-decoration: none;
	}

You'll have to edit the 'http://www.link-here.com' on each link and obviously change the colors to suit.

Lille Ulven · June 5, 2015

The code I provided you with should make your buttons look like on this test page of mine: http://www.lilleulven.com/Test-pages/Title-Testpage/n-K3K7t

If you can describe how you want your buttons to look (maybe even by putting up an example from a different website) it would be easier to help you find a way make it as similar - if not equal - as possible.

Good luck

Lille Ulven

steperenko · June 6, 2015

Thank you very much, Liam. I feel guilty I made you do all this work!!! I will definitely try your code.

steperenko · June 6, 2015

I live your title - Absence of color. Very poetic!

Create linkable Buttons on my site

Comments