Solved

CSS Button Clickable Outside of Text

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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 Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

828 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