1

How do I change a CSS button into a button with URL link? Ive read I need to also add HTML codes?

The only code for the button I can find is this one:

 .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
position: relative;
margin-bottom: 1px;
color: #FFF;
background-color: #2265B9;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#FCEEC1), to(#EEDC94));
background-image: -moz-linear-gradient(top, #FCEEC1, #EEDC94);
background-image: -ms-linear-gradient(top, #FCEEC1, #EEDC94);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FCEEC1), color-stop(100%, #EEDC94));
background-image: -webkit-linear-gradient(top, #069CFF, #0A6AB6);
background-image: -o-linear-gradient(top, #FCEEC1, #EEDC94);
background-image: linear-gradient(top, #FCEEC1, #EEDC94);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
border-color: #EEDC94 #EEDC94 #E4C652;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-width: 1px;
border-style: solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

Im not sure if this is a correct question or correct codes.

user1782663
  • 21
  • 1
  • 2
  • 6

2 Answers2

2

Links aren't added through CSS, they're added through the HTML:

<a href="http://example.com">My Link</a>

If you want it to appear with the styling you've given, simply give it a .ui-state-highlight class:

<a href="http://example.com" class="ui-state-highlight">My Styled Link</a>
James Donnelly
  • 126,410
  • 34
  • 208
  • 218
  • Hi thanks james, but Im confused I dont know exactly where to add this html code, there is only one html file on the CSS button folder, – user1782663 May 29 '13 at 11:55
  • How are you adding this button to your page? – James Donnelly May 29 '13 at 12:01
  • This button comes with the jomres software, and I can only see a CSS jquery file/code from it, not exactly know what you mean though. – user1782663 May 29 '13 at 12:11
  • Well normally with HTML and CSS you'd have a HTML page which links to your CSS page for styling. The HTML is where you add elements like links, and the CSS is where you style them. – James Donnelly May 29 '13 at 12:19
  • Oohh I see, In the folder css/ui_template/mybutton.css there is only a index.html file with only a body and color code, but I guess the oficial html file its not in CSS folders, it must be in another place, well Ill ask to the software dev where is this file location.. thanks James – user1782663 May 29 '13 at 12:28
1

if you just want to add a link to a button then you can use

<button onlick="#"><a href="http://google.com/"> Open this website</a></button>

or do you want to open the url into new page??

abhishekgarg
  • 1,480
  • 9
  • 14