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?
Related
I have this CSS code for a textbox class and I'm on working on linux.
It's saved in a .css file and i'm using gedit. But the box-shadow property isn't recognized. All the others have that different font which shows a keyword or so. But not box-shadow. Any ideas please? It seems to work on windows when i use notepad++.
.textbox
{
background: white;
border: 1px solid #ffa853;
border-radius: 5px;
box-shadow: 0 0 5px 3px #00FFFF;
color: #666;
outline: none;
height:23px;
width: 275px;
}
You may be confusing box-shadow with text-shadow.
text-shadow applies to text, box applies to containers
I have made a small fiddle to demonstrate both
div {
width: 200px;
height: 300px;
background-color: #fff;
box-shadow: 10px 10px 5px grey;
}
p {
text-shadow: 1px 1px 2px black;
color: red;
font-size: 5em;
}
<div>
<p>
hello
</p>
</div>
if you are trying to adjust the appearance of an input (or a number of inputs)
a useful way of doing it is:
input[type="text"] {
/*your styles here*/
}
I am trying to use Active Pseudo CSS class on text box in Firefox but seems like it is not working. Could any one suggest me a solution. below is the css code i am using :
hover is working fine. but on clicking on text box , active class should have been applied but it isnt.
.txtLogin
{
width: 100px;
float: right;
padding: 1px !important;
border: 1px solid #ccc;
height: 20px;
font-size: 12px;
font-weight: normal;
color: #000;
font-family: Arial;
}
.txtLogin:hover
{
background: #ededed;
border: 1px solid #bfbfbf;
border-top: 1px solid #b5b5b5;
}
.txtLogin:active
{
background: #d9d9d9;
border: 1px solid #bfbfbf !important;
}
:active only applies while the mouse button is held down...it is removed when the mouse button is released.
In your case, the pseudo-class is working, just, I suspect, not in the way you were thinking.
#MDN
The :active CSS pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. When interacting with a mouse, this is typically the time between the user presses the mouse button and releases it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on and HTML elements, but may not be limited to just those.
body {
background: lightblue;
}
.txtLogin {
width: 200px;
padding: 1px !important;
border: 1px solid #ccc;
height: 20px;
font-size: 12px;
font-weight: normal;
color: #000;
font-family: Arial;
}
.txtLogin:hover {
background: #ededed;
border: 1px solid #bfbfbf;
border-top: 1px solid #b5b5b5;
}
.txtLogin:active {
background: #d9d9d9;
border: 1px solid #bfbfbf !important;
}
<input type="textarea" class="txtLogin">
I had raised a bug for the same and mozilla has now fixed this bug. Here is the bug id https://bugzilla.mozilla.org/show_bug.cgi?id=1168055 . They have provided a patch for the same.
I think you are looking for focus. Try it like below.
.txtLogin:focus
{
background: #ff00ff;
border: 1px solid #bfbfbf !important;
outline:none;
}
DEMO
Here I am using Oracle ADF.
My button is styled as follows:
af|commandButton:text-only {
background-image: none;
width: auto;
height: 30px;
border: 1px solid #c4ced7;
border-radius: 2px;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: center;
padding: 2px 10px 3px 10px;
}
af|commandButton:text-only:focus {
background-image: none;
width: auto;
outline: none;
height: 30px;
border: 1px solid #c4ced7;
border-radius: 2px;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: center;
padding: 2px 10px 3px 10px;
}
Removed focus outline using "outline:none;" as specified in the CSS snippet.
Now, focus outline is removed in all browsers except firefox.
As per the diagnosis I found that firefox uses "-moz-focus-inner" to render outline.
I tried the following two ways in CSS but no luck.
First way:
button::-moz-focus-inner {
border: 0;
}
Second way:
af|commandButton:text-only:focus::-moz-focus-inner,
af|commandButton:focus::-moz-focus-inner {
border:0;
}
How to specify styles for "-moz-focus-inner" in ADF ?
I had the same problem with my xul programm. The point was, that there was some shadow DOM hidden in the button, which has the dotted border.
This is how I made it work:
button *, button:focus *
{
border: 0;
}
Keep in mind, that the element within the button has a transparent border when the button is not in the :focus state. Therefor you have either to clear it for both states or just set the border to transparent too at :focus.
Hope that helps you too
All,
I have a checkbox that I applied the following CSS style to:
-webkit-appearance: none;
This same code is on some text fields I have and these still continue to work just fine. Why is this functionality causing the checkbox to not allowed to be checked?
I like the styling of the checkbox this way but still need the functionality to work. If I change the code to:
-webkit-appearance: checkbox;
It displays the standard checkbox. Any ideas? Here is a demonstration:
/* http://jsfiddle.net/VWC76/ */
input[type='checkbox'] {
height: 20px;
border: 1px solid #B5B7B8;
font: 14px/26px 'pt-sans', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif;
padding: 7px 7px 7px 12px;
/*margin:0 0 30px 0;*/
background: #FFF;
border: 1px solid #d5d5d6;
outline: none;
color: #96999D;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-appearance: none;
-webkit-font-smoothing: antialiased;
border-radius: 4px;
transition: all 0.15s;
}
input[type=checkbox]:focus {
border-color: #ACACB8;
color: #2E3236;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18)!important;
}
div {
border: 1px inset #ccc;
border-radius: 7px;
margin: 1em;
padding: 1em;
}
#webkitCheckbox {
-webkit-appearance: checkbox;
}
<div>
<label>
<input type="checkbox" />
<span>This has <code>-webkit-appearance: none;</code></span>
</label>
</div>
<div>
<label>
<input type="checkbox" id="webkitCheckbox" />
<span>This has <code>-webkit-appearance: checkbox;</code></span>
</label>
</div>
You just nuked all styles of checkbox on WebKit, so yes you can't see whether they're checked or not (they still are, it just isn't visible to us sighted people without a screen reader).
You need to style the checked state with the :checked pseudo: http://jsfiddle.net/VWC76/450/
input[type=checkbox]:checked {
background-color: red;
/* or whatever styles you want depending on your design */
/* be as obvious as possible that it's a checkbox and that it's checked! */
}
EDIT:
appearance:none now exists outside of WebKit/Blink (caniuse). Just use Autoprefixer if you've better to do than adding prefixes by hand :)
A good implementation: accessible custom checkbox and radio form controls
EDIT 2:
in the fiddle demo, adding focusable elements before and after checkbox to show it works with keyboard (just click on the first occurence of "Test" and then tab tab space tab). It lacks any visual cue that checkbox/label is focused which is a bad thing (it's a demo). Best seen on Chrome which is a worse thing :p (you need Autoprefixer. Try on Codepen)
You need to add a input[type=checkbox]:checked
input[type=checkbox]:checked {
background: #BADA55;
}
If this is what you're looking for?
Disabling the appearance removes the checked appearance too. You also need to add styles to define how the checkbox will appear when checked.
input[type='checkbox']:checked
{
position:relative;
}
input[type='checkbox']:checked:before
{
content:'';
display:block;
width:17px;
height:16px;
position:absolute;
top:1px;
left:1px;
background:none #ACACB8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
opacity:0.5;
}
Check out the fiddle below for an example:
http://jsfiddle.net/8n8hM/
The best way to personnalize checkbox or radio button that works cross browser is by using label that you set for your checkbox.
In your css, you hide your checkbox and you add any style you want for the label.
input[type='checkbox'] {
outline: 0;
user-select: none;
display: inline-block;
position: absolute;
opacity: 0;
}
input[type='checkbox'] + label {
display:inline-block;
width:20px;
height:20px;
background-color:blue
}
input[type='checkbox']:checked + label {
background-color:red
}
<input id="myChk" type="checkbox" />
<label for="myChk"> </label>
See this jsfiddle.
I want to remove the border that is coming just outside the drop down list.
I am trying:
select#xyz option {
Border: none;
}
But does not work for me.
You can't style the drop down box itself, only the input field. The box is rendered by the operating system.
If you want more control over the look of your input fields, you can always look into JavaScript solutions.
If, however, your intent was to remove the border from the input itself, your selector is wrong. Try this instead:
select#xyz {
border: none;
}
The most you can get is:
select#xyz {
border:0px;
outline:0px;
}
You cannot style it completely, but you can try something like
select#xyz {
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url(../images/select-arrow.png),
-webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
color: #555;
font-size: inherit;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
}
You could simply use:
select {
border: none;
outline: none;
scroll-behavior: smooth;
}
As the drop down list border is non editable you can not do anything with that but surely this will fix your initial outlook.
This solution seems not working for me.
select {
border: 0px;
outline: 0px;
}
But you may set select border to the background color of the container and it will work.