I'm having trouble with fixing my button in CSS. I have my button styled correctly, but for some reason the background behind the button itself is white still.
The code for my button & links, as I think it may be an issue with my links as well.
HTML:
<button class="s1btn">
<a href="#" target="_blank" tabindex="1">GitHub
</a></button></div>
CSS for button:
.s1btn a {
text-decoration: none;
color: white;
background-color: #f36dcb;
border: black 1px solid;
border-radius: 3px;
text-align: center;
padding-top: 3px;
padding-left: 3px;
padding-right: 3px;
}`
.s1btn a:hover {
background: #844421;
}
.s1btn a:active {
background: #b36b43;
padding-top: 3px;
}
CSS for all links:
links {
font-size: medium;
margin-left: auto;
padding-right: 50px;
color: #844421;
font-weight: 500;
}
.hLink {
margin-right: 30px;
}
`
Screenshot of button:
Broken Button
I tried to comment out different sections of my button but that didn't help me target the problem to resolve the issue. I also tried to inspect the website itself, to figure out what was causing the background of my button to remain white.
Browsers have default styles for buttons, a tags, etc. Your css is only selecting the <a> tag in the <button> tag, so no styles are being applied to the <button> itself. You can reset the styles of the button with this:
button {
background: transparent;
border: none;
margin: 0;
padding: 0;
}
You can see more on resetting the button styles here: https://css-tricks.com/overriding-default-button-styles/
Related
Any ideas on how i can execute this?
button {
background: #1c00b5;
width: 100px;
border: none;
outline: none;
color: #fff;
height: 35px;
border-radius: 30px;
margin-top: 20px;
box-shadow: 0px 5px 15px 0px rgba(28,0,181,0.3);}
i have tried to add "body .contact button" to let css file know it is the contact us page i am editing but it wont work it only goes to change the style on my other pages aswell so essentially.
body .contact button {
background:
but this doesnt work, any ideas how i can change the style of this button without affecting the others in my css file?
The .contact does not mean the contact page but instead refers to a class called contact.
You could give each of the buttons a different class for example if you wanted one to be red and the other blue:
HTML page 1:
<button class="button-red">This is a red button</button
HTML page 2:
<button class="button-blue">This is a red button</button
CSS file:
.button-red {
background-color: red;
}
.button-blue {
background-color: blue;
}
Just change the colours to your own styling.
Hope this helps.
You really need to search online for 'CSS selectors' and learn how and why to use them.
An example: create CSS rules that are true for all button and create exceptions to those rules using specific selectors. E.g. all buttons are green, except a contact button is red.
The generic rules can be put in a separate CSS file and <link>ed in a document. Create the specific rules in-document with a <style> block to override/modify/add to the linked generic rules.
There are many alternative ways to solve your issue, this is just one of them...
Tip: CSS rules are nothing more than an eleborate list of logical statements varying from easy to virtually unexplicable selectors to modify the style of your document:
if selector,
list-of-selectors,
very-special-selectors
what-does-this-one-do?!?-selector then { property: value }
example
/* put this in an external CSS file */
button { background-color: green }
/* put this in a <style> block */
button.contact { background-color: red }
<button>generic 1</button>
<button>generic 2</button>
<button>generic 3</button>
<br>
<button class="contact">contact</button>
Suppose we have a button
<button> your text </button>
and we ave to use this CSS/style
background: #1c00b5;
width: 100px;
border: none;
outline: none;
color: #fff;
height: 35px;
border-radius: 30px;
margin-top: 20px;
box-shadow: 0px 5px 15px 0px rgba(28,0,181,0.3);
so, we will add a id to button like
<button id="contact-btn"> your text </button>
and then add style using id selector
#contact-btn{
background: #1c00b5;
width: 100px;
border: none;
outline: none;
color: #fff;
height: 35px;
border-radius: 30px;
margin-top: 20px;
box-shadow: 0px 5px 15px 0px rgba(28,0,181,0.3);
}
it will work thanks
How remove this line beetween buttons? First time I have this situation. Please look at my code here:
<a href="#info-section">
<button class="cta-btn rg">WATCH</button>
</a>
<a href="#info-section">
<button class="cta-btn lf">LEARN MORE</button>
</a>
My CSS responsive for buttons:
.cta-btn{
padding: 15px;
border-radius: 30px;
width: 150px;
font-size: .8em;
color: #fff;
background-color: inherit;
border: 1px solid #fff;
margin-top: 20px;
&:hover{
cursor: pointer;
}
}
.rg {
margin-right: 10px;
}
.lf{
margin-left: 10px;
}
I think that line is the underline of the A-tags.
Try adding text-decoration: none; to your <a>. Like this:
a {
text-decoration: none;
}
It could also be possible you forgot to close an A-tag before this part of your code. So check if every <a> has an closing </a>
I assume it's to do with the way you have the <a> tags surrounding the <button> but changing it to <button class="cta-btn rg">WATCH</button> removes the underline. It's almost as if there's a space character that it's formatting.
Note, this isn't the correct way to do it, but it removes the underline.
how could add css style to this button.
Button html:
<html>
<body>
<button onclick="myFunction()">Player</button>
<script>
function myFunction() {
alert('what ever');
}
</script>
</body>
</html>
CSS i want to add
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
If there is answered question, please send link. Thank you
You could add class="button" to the button to make it work. Cause your CSS .button will be used on every element which has the class="button"
function myFunction() {
alert('what ever')
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
<button class="button" onclick="myFunction()">Player</button>
Read more about how CSS Selectors work here
<button class="button" onclick="myFunction()">Player</button>
As your button class you've set it ".button" add "button" as a class like above
Anything you put after the . will match the name of the class in the element
https://css-tricks.com/the-difference-between-id-and-class/ explains how you use classes, ids and what they do in good detail
In your case, you're two solutions :
First : use classe, if you've differents buttons in your pages :
you can just add class attribute in your HTML element like that :
<html>
<body>
<button class="btn" onclick="myFunction()">Player</button>
<script>
function myFunction() {
alert('what ever');
}
</script>
</body>
</html>
And define the style in your class in your CSS :
<style>
.btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
Second : If all buttons are the same style, you can just add style for all element button :
Not change your HTML :
<html>
<body>
<button onclick="myFunction()">Player</button>
<script>
function myFunction() {
alert('what ever');
}
</script>
</body>
</html>
But, in your CSS, just change the reference, for select elements button :
<style>
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
You can learn more explain about selector (.myClass, #myId, element) here in the mozilla developper website.
Don't forget, for optimize your web code, use as little code as possible, for reduce weight of pages, and to correctly use the different selectors (classes or id as not mandatory for CSS style : that depend to your utility) :)
Instead of declaring class button i.e(.button) you can apply style to all button elements.
Demo- https://jsfiddle.net/akshay193sw/bxm8wdqk/ Refer link
If you want to style a button I recommend adding a class to it and styling it with CSS. Here is an example below.
HTML Below
<button class='button_thing'> My Button </button>
CSS Below
.button_thing {
background-color: blue;
width: 180px;
height: 100px;
border-radius: 10px;
}
So what the CSS and HTML code above will do is it will create a blue button with a curved border and with a height of 100 pixels and width of 180 pixels. Now, the next question you might ask is how do I make an animation on the button when I hover over it?
CSS Hover Animations are a bit tricky at the start but get easier with practice. When I make buttons for my websites I like to use a site called ButtonAnimations because it gets straight to the point and gives me tons of animations (with HTML & CSS code) to choose from. Totally recommend it because it simply provides you with amazing buttons and animations that you can just copy and paste into your code. ButtonAnimations Website Link: ButtonAnimations - Create Spectacular Button Animations with HTML 7 CSS
I have a problem getting a hover effect to work across a text and font awesome icon group in a button. With the html and css shown, when the cursor goes over the button, it changes in line with the " a.act_study_btn:hover" css but the font awesome book icon does not unless the cursor hovers over it. What I want is for both text and icon to work together. I've tried some variations on the html and css without success.
<span class="active_study"><a class="act_study_btn" href="index.php/right-view">active study<span class="fa fa-book fa_book_sg"></span></a></span>
a.act_study_btn {
color: #ff0;
background: #000093;
border: 2px solid #000093;
border-radius: 0.3em;
padding: 3% 10%;
text-decoration: none;
font-size: 1em;
padding: 1% 3%;
}
span.fa_book_sg {
color: #ff0;
font-size: 1.2em;
}
a.act_study_btn:hover {
cursor: pointer;
color: #000093;
background: #dfe1f9;
border: 2px solid #f00;
}
span.fa_book_sg:hover {
color: #000093;
}
Any suggestions would most welcome.
You can use the following CSS:
.act_study_btn:hover .fa {
color: #000093;
}
The style rule will apply to the icon when the button is hovered over.
See demo here: http://codepen.io/sol_b/pen/LbXrGv
For some reason I can't style submit form buttons the way I want.
Here's how they look right now.
This code works for normal buttons but not on form submit buttons.
#sprint1, #sprint2, #sprint3, #sprint4, #sprint5 {
width: 13%;
height: 40px;
display: inline-block;
vertical-align: top;
font-family: Verdana, "Helvetica", sans-serif;
font-size:small;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0px #07526e;
padding-top: 2px;
margin-left: auto;
margin-right: auto;
left: 16%;
margin-top: 2%;
position: relative;
cursor: pointer;
border: none;
background-color: #467;
border-radius: 5px;
}
As you can see the gray textboxes look hideous over the blue backgrounds.
I simply cannot go for button tags, which I have no trouble styling at all. But I have to stick with form submit buttons because they trigger a PHP function that I can't get normal buttons to do.
How do I rid these gray boxes and have the text over the blue buttons instead? Thanks very much!
Here's my fiddle
input[type=submit] {
background-color:transparent;
border:none;
}
This is how you apply styling to inputs. In your fiddle, you only applied styles to the <form>
edit
My example above makes the button transparent. My actual advice would be to apply the form's styling to the input to make the input blue without border, etc.