Solved

CSS Button Clickable Outside of Text

Posted on 2016-11-15
5
29 Views
Last Modified: 2016-11-20
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
Comment
Question by:greddin
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 20

Expert Comment

by:Russ Suter
ID: 41888454
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
 

Author Comment

by:greddin
ID: 41888468
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
 
LVL 20

Accepted Solution

by:
Russ Suter earned 500 total points
ID: 41888479
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
 

Author Comment

by:greddin
ID: 41888491
Thank you Russ!!!  Exactly what I was looking for.
0

Featured Post

Enroll in June's Course of the Month

June's Course of the Month is now available! Every 10 seconds, a consumer gets hit with ransomware. Refresh your knowledge of ransomware best practices by enrolling in this month's complimentary course for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question