Solved

CSS Button Clickable Outside of Text

Posted on 2016-11-15
5
17 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
  • 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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

744 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now