Links as buttons

This template is nice for web-savvy guys, but I learn that my clients are not. So need links to appear like buttons. I see selector "pagenav-next" makes link into button, even made it to work through FireBug, but need help setting it up for good in few different cases, and don't know how:

Case #1 is http://fitness7vetrov.ru/blog-rukovoditelya/item/25-kak-otnositsya-k-zhiru-pravilno on the screenshot you'll the link marked by arrow: https://yadi.sk/i/JP4NDXk6bXZkq
It is a module placed through {loadposition}, I've tried to assign "btn1" class in midule suffix, didn't work...

Case #2 is http://fitness7vetrov.ru/akcii/25-hotite-letom-ne-stesnyatsya-svoego-tela?showall=&start=1 which is pagination navigation for long articles. On the Screenshot (https://yadi.sk/i/xrwC6KizbXZoY) you see two links Back and Forward, but it doesn't appear to be button. I see that it should be something like "pagenav-next" class, but have no idea how to bind that class to it, even two classes (hover one too).

Case #3 (future to be, I guess) I gather, that the fixes we do need to be implemented for both Joomla articles and K2 in different manners, cuase what we've fixed already fo Joomla articles, doesn't work for K2 articles (see this thread: https://www.gavick.com/forums/startup/pagebreaks-need-to-line-up-and-some-items-don-t-work-35460.html), so I'd need this Button fix for K2 too...

Thank you very much!

Can I ask what did you want the buttons to look like? If you could show maybe I can help you

Can I ask what did you want the buttons to look like? If you could show maybe I can help you

Thank you, devsmi,
Like here http://demo.gavick.com/joomla25/startup/index.php/k2/categories/categorie-i we see button "Read More" - I see that this template has links in K2 convert to buttons, but outside of K2 - doesnot. So, would be great to have all links turn onto buttons like that on the page I've shown - which would behave by template rules (change colors at the color switch).

I was able to get Case #1 the way I want it to appear.
Case #2 and #3 are still need solution - can't find a way to address that particular links. Using div.pager breaks it, by moving PREV and NEXT together and creating one button. Need to somehow bind a class directly to <a> but don't know how. In override.css I have

Code: Select all

.readmore-link {
  background: linear-gradient(to bottom, #53524d 0%, #62615d 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
  border: medium none;
  border-radius: 3px;
  box-shadow: 1px 1px 0 #585752 inset, 1px 0 3px rgba(0, 0, 0, 0.26);
  color: #fff;
  cursor: pointer;
  display: block;
  float: right;
  font-size: 13px;
  font-weight: normal;
  line-height: 37px;
  margin: 0 0 20px 20px;
  padding: 0 20px;
  text-align: center;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05);
  text-transform: uppercase;
  transition: all 0.1s ease-out 0s;
}

.readmore-link:hover {
background: linear-gradient(to bottom, #9e96f1 0%, #572c5f 100%) repeat scroll 0 0 rgba(0, 0, 0,0); box-shadow: 1px 1px 0 #a69ff8 inset, 1px 0 3px rgba(0, 0, 0, 0.26);
color: #fff}

now, but how do I bind it to that particular <a>?

Got it done! Thanks...

Good job figuring it out. Sorry I wasnt of any help I have been super busy with my son and work. If you need anymore help send me a msg or forum post and I will do what I can.

If you need anymore help send me

Thank you, much appreciated!