How do I remove the background colour from buttons in Zurb Foundation?
<button class="button button-arrow">Button <i class="icon-arrow-right">→</i></button>
CSS/ LESS:
.button-arrow {
background-color: none;
color: black;
font-size: #text-font-size;
text-decoration: underline;
padding-left: 0;
padding-top: 0;
padding-bottom: 0;
&:hover {
background-color: none;
color: #colour-dark;
}
}
Does not work obviously. Any ideas?
change it to : initial, this is the default value of the background-color property
You need to update the .button class:
.button {
background-color: transparent;
}
Make sure your Foundation overrides are in a stylesheet loaded AFTER Foundation styles are loaded so you can use specificity to override them.
The Foundation docs also talk about using SASS to edit the default variables controlling button styles:
The default styles of this component can be customized using these
Sass variables in your project's settings file.
$button-background
Related
I'm working on a React project and I have button that is in Link (react-router dom). So to edit the css of the button i need to add "a." before the class:
<Link to={'/Register'} className="btn">Sign up</Link>
In the css:
a.btn {
background-color: var(--lighter-hover-color);
color: white;
padding: 10px 25px;
margin: 15px 0;
border: none;
cursor: pointer;
border-radius: 20px;
border: 1px solid var(--hover-color);
text-decoration: none;
}
So when i try to add hover function to this class:
a.btn :hover {
transform: scale(1.2);}
Nothing happens. So my question is is there any way i can make the hover to work. The problem i found is that when i have dot (.) , that makes the hover function unusable.
It is not working because you can not target Link react component using a tag.
I would just get rid of a.btn and just use btn:hover.
A better and more elegant approach to style react elements is to user either styled-components or css modules.
refer this article to learn more about different ways of styling react app
https://css-tricks.com/different-ways-to-write-css-in-react/
In my react project, I styled the buttons like this in an external stylesheet file called project.css:
button {
max-width: 150px;
margin: 20px 0;
padding: 12px 20px;
border-style: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
outline: none;
-webkit-appearance: none;
}
This has been working fine, however I recently installed some libraries that also use buttons. My button style that you see above, is interfering with the style the libraries use.
I was wondering how I could keep my button styles, but have the libraries I use ignore my custom button styles.
Is this doable?
Thanks!
Depending on the structure of your code and the libraries code there are a few options.
Load the library styles after your own. When two selectors have the same specificity the last one loaded applies.
Scope your selector under a parent selector unique to your application
.mycode button {
...
}
Migrate your selector to a class instead of targetting the button tag.
.mybutton {
...
}
In general its more flexible to target a custom css class than the tags themselves.
My application is using Bootstrap and for a certain functionality JSGrid is very adequate, but JSgrid has its own colors and styles. Please let me know if you know of any Bootstrap themed JSGrid css.
You can override the styles in the jsGrid-theme.css like this and add it to your own stylesheet after loading the jsGrid stylesheet:
.jsgrid-header-row > .jsgrid-header-cell {
background-color: red;
color: blue;
font-size: 0.8em;
font-weight: normal;
}
I'm working in DNN in the stylesheet to overrule a specific standardstyled button. This is working code to overrule the styling and change it into what I want, but it changes it for all buttons.
#import url("Templates/htmlEditorTemplates.css");
.threeCol .Normal a {
color: #000000;
float: right;
line-height: 3;
}
I understand that this code changes it for all because i specified .threecol .Normal a, which specifies all buttons I made. I only want a specific button on a page to change, in order to do that I have to select the button location. how do I do that?
You do that by adding a class (i.e. special-link) to those links you want to target and give them its own rule.
HTML
<a class="special-link">...</a>
CSS
.threeCol .Normal a.special-link {
color: #000000;
float: right;
line-height: 3;
}
I need to override css style for a particular element with another css file's style in gwt.
I have tried by the following code
sendButton.addStyleName("sendButton");
Window.alert("test");
sendButton.addStyleName("butt");
The alert is coming. but the style has not been overridden. the css code is
.sendButton {
display: block;
font-size: 16pt;
color:red;
}
.butt{
font-size:32pt;
visible:false;
color:green;
}
the button font is in red colour only it is not changed to green. i have included this css in html file as well.
so please tell me how to override one css style by another css file's style in gwt.
Thanks in advance
Try this
sendButton.addStyleName("sendButton");
Window.alert("test");
sendButton.setStyleName("butt");
setStyleName Clears all of the object's style names and sets it to the given style.
If this is the style that you want applied to all buttons, you can override the style the GWT applies to all buttons: gwt-Button.
Alternatively, try:
color: red !important;
or be more specific with your CSS selector so that other CSS rules do not take precedence.
I am assuming the .gwt-button and .gwt-Button-selected are the default style names(provided by GWT) of you button.
You can do sth like below. Here I have removed some css properties(all properties are random here). You should write these css properties in your UIBinder.
#external .gwt-Button;
.gwt-Button {
cursor: pointer;
cursor: hand;
color: #3e3e3e;
font-weight: bold;
text-align: center;
background: white;
margin-top: -6px;
margin-top: -33px;
margin-left: -1px;
}
#external .gwt-Button-selected;
.gwt-Button .gwt-Button-selected {
cursor: default;
background: white;
}