I'm using ASP.NET, some of my buttons just do redirects. I'd rather they were ordinary links, but I don't want my users to notice much difference in the appearance. I considered images wrapped by anchors, i.e. tags, but I don't want to have to fire up an image editor every time I change the text on a button.
Apply this class to it
.button {
font: bold 11px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
Example
Why not just wrap an anchor tag around a button element.
<button type="button">Text of Some Page</button>
This will work for IE9+, Chrome, Safari, Firefox, and probably Opera.
IMHO, there is a better and more elegant solution. If your link is this:
Click me!!!
The corresponding button should be this:
<form method="GET" action="http://www.example.com">
<input type="submit" value="Click me!!!">
</form>
This approach is simpler because it uses simple html elements, so it will work in all the browsers without changing anything. Moreover, if you have styles for your buttons, this solution will apply the same styles to your new button for free.
The CSS3 appearance property provides a simple way to style any element (including an anchor) with a browser's built-in <button> styles:
a.btn {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
}
<body>
<a class="btn">CSS Button</a>
</body>
CSS Tricks has a nice outline with more details on this. Keep in mind that no version of Internet Explorer currently supports this according to caniuse.com.
If you want nice button with rounded corners, then use this class:
.link_button {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
background: #4479BA;
color: #FFF;
padding: 8px 12px;
text-decoration: none;
}
Example
a {
display: block;
height: 20px;
width: auto;
border: 1px solid #000;
}
You can play with <a> tags like this if you give them a block display. You can adjust the border to give a shade like effect and the background color for that button feel :)
As TStamper said, you can just apply the CSS class to it and design it that way. As CSS improves the number of things that you can do with links has become extraordinary, and there are design groups now that just focus on creating amazing-looking CSS buttons for themes, and so forth.
For example, you can transitions with background-color using the -webkit-transition property and pseduo-classes. Some of these designs can get quite nutty, but it's providing a fantastic alternative to what might in the past have had to have been done with, say, flash.
For example (these are mind-blowing in my opinion),
http://tympanus.net/Development/CreativeButtons/ (this is a series of totally out-of-the-box animations for buttons, with source code on the originating page).
http://www.commentredirect.com/make-awesome-flat-buttons-css/ (along the same lines, these buttons have nice but minimalistic transition effects, and they make use of the new "flat" design style.)
You may do it with JavaScript:
Get CSS styles of real button with getComputedStyle(realButton).
Apply the styles to all your links.
/* javascript, after body is loaded */
'use strict';
{ // Namespace starts (to avoid polluting root namespace).
const btnCssText = window.getComputedStyle(
document.querySelector('.used-for-btn-css-class')
).cssText;
document.querySelectorAll('.btn').forEach(
(btn) => {
const _d = btn.style.display; // Hidden buttons should stay hidden.
btn.style.cssText = btnCssText;
btn.style.display = _d;
}
);
} // Namespace ends.
<body>
<h3>Button Styled Links</h3>
<button class="used-for-btn-css-class" style="display: none"></button>
first
second
<button>real button</button>
<script>/* You may put JS here. */</script>
</body>
You could create a standard button, then use it as the background image for a link. Then you can set the text in the link without changing the image.
The best solutions if you don't a special rendered button are the two already given by TStamper and Ólafur Waage.
This gets into the details of the css a bit more too, and gives you some images:
http://www.dynamicdrive.com/style/csslibrary/item/css_square_buttons/
Much belated answer:
I've been wrestling with this on and off since I first started working in ASP. Here's the best I've come up with:
Concept: I create a custom control that has a tag. Then in the button I put an onclick event that sets document.location to the desired value with JavaScript.
I called the control ButtonLink, so that I could easily get if confused with LinkButton.
aspx:
<%# Control Language="VB" AutoEventWireup="false" CodeFile="ButtonLink.ascx.vb" Inherits="controls_ButtonLink" %>
<asp:Button runat="server" ID="button"/>
code behind:
Partial Class controls_ButtonLink
Inherits System.Web.UI.UserControl
Dim _url As String
Dim _confirm As String
Public Property NavigateUrl As String
Get
Return _url
End Get
Set(value As String)
_url = value
BuildJs()
End Set
End Property
Public Property confirm As String
Get
Return _confirm
End Get
Set(value As String)
_confirm = value
BuildJs()
End Set
End Property
Public Property Text As String
Get
Return button.Text
End Get
Set(value As String)
button.Text = value
End Set
End Property
Public Property enabled As Boolean
Get
Return button.Enabled
End Get
Set(value As Boolean)
button.Enabled = value
End Set
End Property
Public Property CssClass As String
Get
Return button.CssClass
End Get
Set(value As String)
button.CssClass = value
End Set
End Property
Sub BuildJs()
' This is a little kludgey in that if the user gives a url and a confirm message, we'll build the onclick string twice.
' But it's not that big a deal.
If String.IsNullOrEmpty(_url) Then
button.OnClientClick = Nothing
ElseIf String.IsNullOrEmpty(_confirm) Then
button.OnClientClick = String.Format("document.location='{0}';return false;", ResolveClientUrl(_url))
Else
button.OnClientClick = String.Format("if (confirm('{0}')) {{document.location='{1}';}} return false;", _confirm, ResolveClientUrl(_url))
End If
End Sub
End Class
Advantages of this scheme: It looks like a control. You write a single tag for it, <ButtonLink id="mybutton" navigateurl="blahblah"/>
The resulting button is a "real" HTML button and so looks just like a real button. You don't have to try to simulate the look of a button with CSS and then struggle with different looks on different browsers.
While the abilities are limited, you can easily extend it by adding more properties. It's likely that most properties would just have to "pass thru" to the underlying button, like I did for text, enabled and cssclass.
If anybody's got a simpler, cleaner or otherwise better solution, I'd be happy to hear it. This is a pain, but it works.
This is what I used. Link button is
<div class="link-button">Example</div>
CSS
/* body is sans-serif */
.link-button {
margin-top:15px;
max-width:90px;
background-color:#eee;
border-color:#888888;
color:#333;
display:inline-block;
vertical-align:middle;
text-align:center;
text-decoration:none;
align-items:flex-start;
cursor:default;
-webkit-appearence: push-button;
border-style: solid;
border-width: 1px;
border-radius: 5px;
font-size: 1em;
font-family: inherit;
border-color: #000;
padding-left: 5px;
padding-right: 5px;
width: 100%;
min-height: 30px;
}
.link-button a {
margin-top:4px;
display:inline-block;
text-decoration:none;
color:#333;
}
.link-button:hover {
background-color:#888;
}
.link-button:active {
background-color:#333;
}
.link-button:hover a, .link-button:active a {
color:#fff;
}
How about using asp:LinkButton?
You can do that - I made a linkbutton look like a standard button, using TStamper's entry. Underlining showed under the text when I hovered, though, in spite of the text-decoration: none setting.
I was able to stop the hover-underlining by adding style="text-decoration: none" within the linkbutton:
<asp:LinkButton
id="btnUpdate"
CssClass="btnStyleTStamper"
style="text-decoration: none"
Text="Update Items"
Onclick="UpdateGrid"
runat="server"
/>
By using border, color and background color properties you can create a button lookalike html link!
a {
background-color: white;
color: black;
padding: 5px;
text-decoration: none;
border: 1px solid black;
}
a:hover {
background-color: black;
color: white;
}
<a href="https://stackoverflow.com/
">Open StackOverflow</a>
Hope this helps :]
Use this class. It will make your link look the same as a button when applied using the button class on an a tag.
or
HERE IS ANOTHER DEMO JSFIDDLE
.button {
display: inline-block;
outline: none;
cursor: pointer;
border: solid 1px #da7c0c;
background: #478dad;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .3em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.button:active {
position: relative;
top: 1px;
}
HTML
<a class="btn">Button</a>
CSS
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
.button {
font: bold 11px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
Example
I use an asp:Button:
<asp:Button runat="server"
OnClientClick="return location='targetPage', true;"
UseSubmitBehavior="False"
Text="Button Text Here"
/>
This way, the operation of the button is completely client-side and the button acts just like a link to the targetPage.
Use below snippet.
.a{
color: $brn-acc-clr;
background-color: transparent;
border-color: #888888;
&:hover:active{
outline: none;
color: #888888;
border-color: #888888;
}
&:fill{
background-color: #888888;
color: #fff;
box-shadow: 0 3px 10px rgba(#888888, 0.5);
&:hover:active{
color: #fff;
}
&:hover:not(:disabled){
transform: translateY(-2px);
background-color: darken(#888888, 4);
}
}
}
Simple button css now you can play around with your editor
a {
display: inline-block;
background: #000000c9;
color: #000;
padding: 12px 24px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
a:hover {
background:#000
cursor: pointer;
transition: 0.3s ease-in;
}
Link tag
<a href="#">Hover me<a>
If you need some cool effect, hover and shadow; you can use this:
.button {
text-decoration: none;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #450775;
border: none;
border-radius: 15px;
box-shadow: 0 9px #e1d5ed;
}
.button:hover {background-color: #220440}
.button:active {
background-color: #230545;
box-shadow: 0 5px #e1d5ed;
transform: translateY(4px);
}
This worked for me. It looks like a button and behaves like a link. You can bookmark it for example.
<a href="mypage.aspx?param1=1" style="text-decoration:none;">
<asp:Button PostBackUrl="mypage.aspx?param1=1" Text="my button-like link" runat="server" />
</a>
How about using asp:LinkButton?
I have the following HTML
<div id="borderContainer" class="scViewer" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false">
<div id="buttonPagerContentPane" data-dojo-type="dijit/layout/ContentPane" align="center" data-dojo-props="region:'bottom'" class="buttonContentPane">
<div id="buttonPagerTitle" class="ContentPaneTitle">
Sheet Selector <br>
</div>
<button data-dojo-type="dijit/form/Button" type="button" data-dojo-attach-point="PreviousButtonAttachNode" id="previousButton" class="scViewButtonContent buttonContentPane">
Previous
</button>
<button data-dojo-type="dijit/form/Button" type="button" data-dojo-attach-point="NextButtonAttachNode" id="nextButton" class="scViewButtonContent">
Next
</button>
</div>
</div>
And the following CSS:
.scViewer {
color: #2546ff;
}
.scViewer .buttonContentPane {
padding: 5px 5px;
color:#FFFFFF;
border-radius: 5px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.scViewer .ContentPaneTitle{
color: #2546ff;
font-weight: bold;
}
.scViewer .buttonContentPane .scViewButtonContent{
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
text-decoration: none;
}
My problem is that the two previous/next buttons don't inherit the buttonContentPane class without explicitly defining it again, even though it is within the parent buttonPagerTitle <div> ..To demonstrate this above, I explicitly define the nextButton without the buttonContentPane property, and the resultant HTML in the dev tools does not contain the buttonContentPane in the defined, but the inherited section contains buttonContentPane with its properties grayed out:
My overall goal is to boilerplate CSS code for re-use within my organization. Is my syntax wrong? Did I structure the selectors improperly? Thank you for your time
I assume you want your 'next' and 'previous' buttons to inherit these properties:
.scViewer .buttonContentPane {
padding: 5px 5px;
color:#FFFFFF;
border-radius: 5px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
Unfortunately (for you), not all properties are inherited by an element's children/descendants, and not all elements will inherit from their parents/ancestors. You're experiencing both problems.
Padding, border-radius, and box-shadow aren't automatically inherited: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
Color usually is inherited but buttons are form elements, and form elements don't inherit properties from their parents: Why are CSS-styles not inherited by HTML form fields?
You'll need to either directly add the class to the buttons if you want them to be styled correctly (as you mentioned you did in your question), or you'll need to write rules in your CSS that explicitly state the buttons should inherit properties from their parents.
The following is a simple example showing how to explicitly tell an element to inherit properties from its parent. Click "Run code snippet" to see the resulting buttons.
.wrapper1,
.wrapper2 {
color:red;
padding: 20px;
box-shadow: 0 0 3px rgba(0,0,0,0.4);
border-radius: 10px;
margin: 10px;
width: 100px;
}
.wrapper2 button {
color: inherit;
padding: inherit;
box-shadow: inherit;
border-radius: inherit;
border: none;
}
<div class="wrapper1">
This button doesn't inherit.
<button>My button</button>
</div>
<div class="wrapper2">
This button does inherit.
<button>My button</button>
</div>
<div class="group">
<input placeholder="Номер карты" class="inpts inpt-card">
<input placeholder="Владелец карты" class="inpts inpt-owner">
<input placeholder="ММ/ГГ" class="inpt-mm small-inpts mmgg">
<input placeholder="CVC" class="inpt-cvc small-inpts cvc">
<div class="clear"></div>
All code at - https://jsfiddle.net/romariokbn/pspb5urc/
I want box-shadow on all of the focused inpts, but some sides of them is under the other inpts. Z-index changes doesnt work. How can I do it?
You can also just add the css property like shown below
position: relative;
EDIT: no jquery / js code needed imo
.inpts:focus, .small-inpts:focus {
-webkit-box-shadow: 0px 0px 10px 0px #fbb040;
-moz-box-shadow: 0px 0px 10px 0px #fbb040;
box-shadow: 0px 0px 10px 0px #fbb040;
z-index: 10;
-webkit-appearance: none;
position: relative;
}
If you really wish to affect all inputs on this page add it within "input"
input {
outline: none;
position: relative;
}
Updated jsfiddle
You could use jQuery to change the z-index property of the input you focus on, then revert the z-index value when you focus out:
$("input").on("focusin", function(){
$(this).css("z-index", 1);
});
$("input").on("focusout", function(){
$(this).css("z-index", 0);
});
You'll also need to add the following CSS to the input elements for the z-index rule to apply:
input {
outline: none;
position: relative;
top: 0; left: 0;
}
EDIT: updated jsfiddle https://jsfiddle.net/pspb5urc/1/
I have a css sprite image and a text besides it. I was wondering how to make a hover on both image and text to make them change the color. Here is the css:
span#mail-to {
background: url("/images/magenta_wpm_icons.png") -24px 0px;
position: absolute;
cursor: pointer;
width: 23px;
height: 15px;
}
a.button-link:hover,
a.button-link:active,
a.button-link:disabled {
color: #ffffff;
text-decoration: none;
color: #75ba54;
background-image: none;
border-color: #75ba54 #339933 #006600;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
span#mail-to:hover {
background-position: -24px -27px;
}
a.button-link {
padding-left: 3px;
font-size: 15px;
padding-right: 10px;
}
HTML:
<span id ="mail-to"> </span>
<a class="button-link" href="mailto:">Mail to</a>
Any ideas???
Wrap the span and the anchor tags in a div and define the hover event on the div (rather than individual hover handling on the individual span and anchor tags).
HTML
<div class="mail-button-wrapper">
<span id ="mail-to"> </span>
<a class="button-link" href="mailto:">Mail to</a>
</div>
CSS
.mail-button-wrapper:hover #mail-to {
// style the span here
}
.mail-button-wrapper:hover a.button-link {
// style the anchor tag here
}
Also: you don't need to say span#mail-to. just say #mail-to.
Identifiers are unique, so adding span doesn't make the reference any more specific than having the id on its own.
Trying to style the error output on jquery.validate and I am not getting any success using Pseudo-elements in the css. Anyone ever have any success styling an error box with an arrow on the top with jquery.validate? Can get the box with the with arrow on top using normal CSS but not with jquery.validate?.
Used http://cssarrowplease.com/ to get the CSS (code below). Thanks
<style type="text/css">
label.error {
float: none;
color: red;
padding: .8em;
vertical-align:middle;
font-size:12px;
display: inline;
font-style:normal;
border: solid 1px #ccc;
border-radius: 4px;
background: #f8f8f8;
box-shadow: 0px 2px 6px rgba(0, 0, 0, .3);
}
label.error:after, label.error:before {
bottom: 100%;
left: 30%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
label.error:after {
border-color: rgba(248, 248, 248, 0);
border-bottom-color: #f8f8f8;
border-width: 8px;
margin-left: -8px;
}
label.error:before {
border-color: rgba(204, 204, 204, 0);
border-bottom-color: #ccc;
border-width: 9px;
margin-left: -9px;
}
</style>
The reason your code is failing is because your trying to apply it to a <label> element.
The code you've linked to is applying the sample CSS to a <div> element, which is nothing like a <label>.
Use the errorElement option to force the jQuery Validate plugin to use <div> elements instead of label.
$('#myform').validate({
// your other options, rules, and callbacks
errorElement: 'div'
});
Don't forget to change label.error into div.error in all of your CSS rules.
You're going to need the specificity of div.error because the plugin also applies the error class to the input elements.
EDIT:
Since, by your own admission, you're "not an expert in CSS", why reinvent the wheel? You can easily combine jQuery Validate with a tooltip plugin, like Tooltipster, where all the difficult CSS tooltips are provided for you. See this question/answer and this demo.