More buttons

Sunday, 20May2018 Filed in: Webmaster

I've been tweaking my buttons at Technopagan Yearnings.

Here's the code for the button link inserted in the head.

a.button:link, a.button:visited {border-radius: 39px; background-color: #696969; font-family: Special Elite; font-size: large; text-align:center; margin: ..09em; color: #C0C0C0; padding:5px; text-shadow: 2px 2px 4px #000000;}
a.button:hover {color: white; background-image: none; background-color:#0A4F00;}
a.button:active {background-image: none; background-color: transparent; border:1px solid #0A4F00; color: #0A4F00;}

Obviously this produces a very distinctive looking button. Originally I planned to use it in the sidebar like this.

Screen Shot 2018-05-20 at 2.18.22 PM

That was good, but I also needed something on the lexicon index. So I worked out the button bar while I was working on the second version of lexicon.

Well, that worked on the modal dialogue, but getting around the main lexicon page was a pain in the posterior.

I came up with something that looks a little kludgy, but it works.

Screen Shot 2018-05-20 at 2.24.54 PM

Here's the code.

I also made a bit of a change on the individual letter pages of the lexicon.

Screen Shot 2018-05-20 at 2.31.18 PM

Heres the code for these buttons.

<div class="buttonbar" style="text-align: center;">
<a id="Aa" class="button" style="font-size: smaller; font-style: italic;" HREF="#Aa-box""> index </a></p>
<a class="button" HREF="#Aa"> Aa… </a>
<a class="button" HREF="http://neowayland.com/lexicon/bb/#Bb">b</a>
<a class="button" HREF="http://neowayland.com/lexicon/cc/#Cc">c</a>
<a class="button" HREF="http://neowayland.com/lexicon/dd/#Dd">d</a>
<a class="button" HREF="http://neowayland.com/lexicon/ee/#Ee">e</a>
<a class="button" HREF="http://neowayland.com/lexicon/ff/#Ff">f</a>
<a class="button" HREF="http://neowayland.com/lexicon/gg/#Gg">g</a>
<a class="button" HREF="http://neowayland.com/lexicon/hh/#Hh">h</a>
<a class="button" HREF="http://neowayland.com/lexicon/ii/#Ii">i</a>
<a class="button" HREF="http://neowayland.com/lexicon/jj/#Jj">j</a>
<a class="button" HREF="http://neowayland.com/lexicon/kk/#Kk">k</a>
<a class="button" HREF="http://neowayland.com/lexicon/ll/#Ll">l</a>
<a class="button" HREF="http://neowayland.com/lexicon/mm/#Mm">m</a>
<a class="button" HREF="http://neowayland.com/lexicon/nn/#Nn">n</a>
<a class="button" HREF="http://neowayland.com/lexicon/oo/#Oo">o</a>
<a class="button" HREF="http://neowayland.com/lexicon/pp/#Pp">p</a>
<a class="button" HREF="http://neowayland.com/lexicon/qq/#Qq">q</a>
<a class="button" HREF="http://neowayland.com/lexicon/rr/#Rr">r</a>
<a class="button" HREF="http://neowayland.com/lexicon/ss/#Ss">s</a>
<a class="button" HREF="http://neowayland.com/lexicon/tt/#Tt">t</a>
<a class="button" HREF="http://neowayland.com/lexicon/uu/#Uu">u</a>
<a class="button" HREF="http://neowayland.com/lexicon/vv/#Vv">v</a>
<a class="button" HREF="http://neowayland.com/lexicon/ww/#Ww">w</a>
<a class="button" HREF="http://neowayland.com/lexicon/xx/#Xx">x</a>
<a class="button" HREF="http://neowayland.com/lexicon/yy/#Yy">y</a>
<a class="button" HREF="http://neowayland.com/lexicon/zz/#Zz">z</a>
</div>

There are index buttons at the bottom of each lexicon entry, but only the top one has an ID code. This way, that button will be at the top of the window. Notice too that the A button here is different than the others. It takes the user to a spot on the page instead of another page, so it looks different.

After I looked at all this, I came up with one more refinement.

Screen Shot 2018-05-20 at 2.40.53 PM

If you look closely, there is a button on the sidebar green title bar. Hover over it and it changes color just like the letter buttons below. I put one in for the lexicon and the time table. Here's the code.

<a class="button" style="font-family: 'Quintessential', cursive; color: white; padding: 3px" HREF="http://neowayland.com/lexicon"> lexicon </a></h6>

Of course I had to tweak a little bit to make it work in the sidebar, but I think it looks pretty good.

Tags: HTML + button row + sidebar + Technopagagan Yearnings

TEchnology + KNOwledge + PAGAN = TEKNOPAGAN

More buttons

TEchnology
+ KNOwledge
+ PAGAN
= TEKNOPAGAN