Solved

CSS Button Clickable Outside of Text

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Best Practice CSS floating images 2 33
Kill default webkit margin!  Please! 6 23
Add animation to your css 12 32
Centered Image 2 23
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

895 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

15 Experts available now in Live!

Get 1:1 Help Now