• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 42
  • Last Modified:

CSS Button Clickable Outside of Text

Below is what I currently have mostly working.  Is it possible to make it so that the entire button is clickable?  Right now, you have to click on the text itself to get the link.   I've tried using display:block but does not work as expected.  

Note:  "span" & "a href" tags are generated from a SharePoint richtext editor.  I cannot change anything within the span tag. Only the css class.  I'm hoping what I asking for can be done only in the css itself?

<!DOCTYPE html><html><head>
<style type="text/css">

span.ms-rteElement-button1 {
    -ms-name:"Custom button type 1";
	border: 1px solid #495267;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-family: Verdana, Arial, Helvetica;
	padding: 7px 30px 7px 30px;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	color: #FFFFFF !important;
	background-color: #606c88;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #606c88), color-stop(100%, #3f4c6b));
	background-image: -webkit-linear-gradient(top, #606c88, #3f4c6b);
	background-image: -moz-linear-gradient(top, #606c88, #3f4c6b);
	background-image: -ms-linear-gradient(top, #606c88, #3f4c6b);
	background-image: -o-linear-gradient(top, #606c88, #3f4c6b);
	background-image: linear-gradient(top, #606c88, #3f4c6b);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#606c88, endColorstr=#3f4c6b);
}
span.ms-rteElement-button1:hover {
	border: 1px solid #363d4c;
	background-color: #4b546a;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4b546a), color-stop(100%, #2c354b));
	background-image: -webkit-linear-gradient(top, #4b546a, #2c354b);
	background-image: -moz-linear-gradient(top, #4b546a, #2c354b);
	background-image: -ms-linear-gradient(top, #4b546a, #2c354b);
	background-image: -o-linear-gradient(top, #4b546a, #2c354b);
	background-image: linear-gradient(top, #4b546a, #2c354b);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#4b546a, endColorstr=#2c354b);
}
span.ms-rteElement-button1:active {
	position:relative;
	top:1px;
}

span.ms-rteElement-button1 a {
	color: #FFFFFF !important;
	text-decoration:none;
}

span.ms-rteElement-button1 a:active {
	color: #FFFFFF !important;
	text-decoration:none;

}

span.ms-rteElement-button1 a:visited {
	color: #FFFFFF !important;
	text-decoration:none;
}

</style></head>
<body>

<!-- This line is auto-generated by SharePoint and cannot be changed-->
<span class="ms-rteElement-button1"><a href="http://google.com">CSS Test Button</a></span>

</body>
</html>

Open in new window


Thank you for your help.
0
greddin
Asked:
greddin
  • 2
  • 2
1 Solution
 
Russ SuterCommented:
Easier than you might think but possibly not the approach you expected. First I'll provide the CSS and markup, then the explanation.
CSS:
span.ms-rteElement-button1, a.buttonhref {
    -ms-name:"Custom button type 1";
	border: 1px solid #495267;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-family: Verdana, Arial, Helvetica;
	padding: 7px 30px 7px 30px;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	color: #FFFFFF !important;
	background-color: #606c88;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #606c88), color-stop(100%, #3f4c6b));
	background-image: -webkit-linear-gradient(top, #606c88, #3f4c6b);
	background-image: -moz-linear-gradient(top, #606c88, #3f4c6b);
	background-image: -ms-linear-gradient(top, #606c88, #3f4c6b);
	background-image: -o-linear-gradient(top, #606c88, #3f4c6b);
	background-image: linear-gradient(top, #606c88, #3f4c6b);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#606c88, endColorstr=#3f4c6b);
}
span.ms-rteElement-button1:hover, a.buttonhref:hover {
	border: 1px solid #363d4c;
	background-color: #4b546a;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4b546a), color-stop(100%, #2c354b));
	background-image: -webkit-linear-gradient(top, #4b546a, #2c354b);
	background-image: -moz-linear-gradient(top, #4b546a, #2c354b);
	background-image: -ms-linear-gradient(top, #4b546a, #2c354b);
	background-image: -o-linear-gradient(top, #4b546a, #2c354b);
	background-image: linear-gradient(top, #4b546a, #2c354b);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#4b546a, endColorstr=#2c354b);
}
span.ms-rteElement-button1:active, a.buttonhref:active {
	position:relative;
	top:1px;
}

a.buttonhref {
  text-decoration: none;
}

span.ms-rteElement-button1 a {
	color: #FFFFFF !important;
	text-decoration:none;
}

span.ms-rteElement-button1 a:active {
	color: #FFFFFF !important;
	text-decoration:none;

}

span.ms-rteElement-button1 a:visited {
	color: #FFFFFF !important;
	text-decoration:none;
}

Open in new window

Markup:
<a class="buttonhref" href="http://google.com">CSS Test Button</a>

Open in new window

So here's what I've done...
1. Remove the <span> element wrapping the link
2. Altered the CSS so the button-like styles are directly applied to any <a> element with the class buttonhref.

VOILA! Any hyperlink can now look and act like a button. All you need to do is add the class buttonhref to it.

Just in case you want to see it in action, here's a jsfiddle for you: https://jsfiddle.net/s4w3t7nt/
0
 
greddinAuthor Commented:
Thank you Russ.  You're solution is good, but I'm not able to modify the span line.  I can only modify the CSS itself.  Could there be a way to apply the href to the href tag since it's a child of the span it's within?
0
 
Russ SuterCommented:
Yes, with a minor tweak to what I've already done. Here's the new CSS:
span.ms-rteElement-button1 a {
    -ms-name:"Custom button type 1";
	border: 1px solid #495267;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-family: Verdana, Arial, Helvetica;
	padding: 7px 30px 7px 30px;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	color: #FFFFFF !important;
	background-color: #606c88;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #606c88), color-stop(100%, #3f4c6b));
	background-image: -webkit-linear-gradient(top, #606c88, #3f4c6b);
	background-image: -moz-linear-gradient(top, #606c88, #3f4c6b);
	background-image: -ms-linear-gradient(top, #606c88, #3f4c6b);
	background-image: -o-linear-gradient(top, #606c88, #3f4c6b);
	background-image: linear-gradient(top, #606c88, #3f4c6b);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#606c88, endColorstr=#3f4c6b);
}
span.ms-rteElement-button1 a:hover {
	border: 1px solid #363d4c;
	background-color: #4b546a;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4b546a), color-stop(100%, #2c354b));
	background-image: -webkit-linear-gradient(top, #4b546a, #2c354b);
	background-image: -moz-linear-gradient(top, #4b546a, #2c354b);
	background-image: -ms-linear-gradient(top, #4b546a, #2c354b);
	background-image: -o-linear-gradient(top, #4b546a, #2c354b);
	background-image: linear-gradient(top, #4b546a, #2c354b);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#4b546a, endColorstr=#2c354b);
}
span.ms-rteElement-button1 a:active {
	position:relative;
	top:1px;
}

span.ms-rteElement-button1 a {
	color: #FFFFFF !important;
	text-decoration:none;
}

span.ms-rteElement-button1 a:active {
	color: #FFFFFF !important;
	text-decoration:none;

}

span.ms-rteElement-button1 a:visited {
	color: #FFFFFF !important;
	text-decoration:none;
}

Open in new window

And here's the updated jsfiddle to demonstrate: https://jsfiddle.net/s4w3t7nt/1/
0
 
greddinAuthor Commented:
Thank you Russ!!!  Exactly what I was looking for.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now