Links and a CSS button

  • 1
  • Question
  • Updated 8 years ago
  • Answered
CSS Button.... So made a button with this site : http://css-tricks.com/examples/Button... but - how does one add a link to that? I can add text and link to that but surely the button itself can be made into a link...? would rather make the button itself a link not just the text on a button.....
Photo of vasey888

vasey888

  • 51 Posts
  • 0 Reply Likes

Posted 8 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Vasey888

Would you mind posting your code and then I can get back to you about how to link the button? Thanks!
Photo of vasey888

vasey888

  • 51 Posts
  • 0 Reply Likes
OK so this is the button CSS

<!--

<style type="text/css">

.button {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.button:active {
border-top-color: #1b435e;
background: #1b435e;
}

</style>

-->

and then I apply just using the div class bit of code...

does that help?

thanks so much
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Vasey888

Please leave this with me and I'll see if I can come up with something that will work for you. Thanks for your patience!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Vasey888

Do you mind sharing the div code as well? Thanks!
Photo of vasey888

vasey888

  • 51 Posts
  • 0 Reply Likes
hi - i just used this :

<!--

<div class="button">

Click here

-->
Photo of vasey888

vasey888

  • 51 Posts
  • 0 Reply Likes
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks vasey

I'll take a look and get back to you. It may take a bit of time :)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi vassey

Thanks for your patience. Please replace your current div button code with this:

<!--<a href="http://yoursite.com">&lt;div class="button">
Click Here
</div></a>-->

Please let me know if you have any trouble with this.
Photo of vasey888

vasey888

  • 51 Posts
  • 0 Reply Likes
once again - superb - I find it hard to learn this stuff on the fly so I really do appreciate this help - many thanks again... Dave