I am trying to add CSS to my embedded "Pay" button from selly.gg on my site created on carrd.co.
<button data-selly-product="c2f270b2">Pay</button>
I'm looking for some sort of link to a css file, but there are none anywhere. Please let me know how I can get this to work.
Following worked fine for me
button{
margin:auto;
display:block;
background-color: #FDB714;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
}
Related
I'm only just learning html and have a question about linking a button. Could you tell me what I am doing wrong here?
</style>
<body>
<button onClick="name.html" class="button" ><span>name </span> </button>
<br>
In your application you should rather use an anchor link, because the button mostly used in forms. The corresponding HTML tag is <a>.
If you want to make your link look like a button you can give it a class and design it with CSS.
name
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
I am trying to add a CSS button to my code, but the background colour of the button is not changing.
Here is my CSS code for the button:
.button {
background-color: red;
border: solid;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline;
font-size: 16px;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
}
Here is the HTML code I currently have:
<div>
Click here
</div>
The background of the button remains the standard white colour no matter what I set the background-color to. This is the current button, but I would like to change the background.
This is exactly your code. How you can see it works.
I think in your project is another CSS which overwrites your background-color.
You can use the developer tools (F12) to check which part of your CSS is responsible for the background-color.
chrome dev tools (inspecting html)
chrome dev tools (inspecting css)
.button {
background-color: red;
border: solid;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline;
font-size: 16px;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
}
<div>
Click here
</div>
Override other css:
.button{
background: red! important
}
Either your CSS is being overridden by another class that you haven't showed us or your browser is caching the incorrect result. If you are using Chrome:
Right click your page and click "Inspect"
In Inspector there should be a "Network" tab listed. Click it.
Inside of that tab, there should be a checkbox for "Disable Cache". Check it
Refresh your page with this option checked.
If that doesn't work then it is likely being overridden somewhere.
Yes. There's nothing wrong with the code. Maybe you shouldn't have rendered your css properly or used the same class name for lot of elements. I've also tried it with your code. It's good.
.button {
background-color: blue;
border: 2px solid red;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline;
font-size: 16px;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
}
<div>
Click here
</div>
Before you mark me as duplicate: I've read all the similar questions and tried the solutions and either I'm too dumb to understand them (a valid possibility), or my problem is different, but they didn't work for me.
I was marked off-topic on wordpress forum since it is apparently a css/html problem, so I reposted here.
Now on to the problem:
I'm having trouble with removing the underlines of some links I have on my site. Here's my html definition of the links:
<p style="text-align: center;">
<a class="buttonL" href="http://cns.uni.lu/homel"><</a>
<a class="buttonR" href="http://cns.uni.lu/homer">></a>
</p>
And my CSS from the "custom CSS" page:
.buttonL {
border-radius: 50%;
position:fixed;
top: 50%;
left: 0%;
background-color: transparent;
border: none;
color: grey;
padding: 5px 20px;
text-align: center;
text-decoration: none !important;
display: inline-block;
font-size: 50px;
margin: 4px 2px;
cursor: pointer;
font-weight: 900;
}
.buttonR {
border-radius: 50%;
position:fixed;
top: 50%;
right: 0%;
background-color: transparent;
border: none;
color: grey;
padding: 5px 20px;
text-align: center;
text-decoration: none !important;
display: inline-block;
font-size: 50px;
margin: 4px 2px;
cursor: pointer;
font-weight: 900
}
I know it's redundant and inelegant. No use commenting on that. I can make it more elegant later.
For some reason, there is a line underneath the links, that won't go away. I've tried using
text-decoration:none !important;
, but to no avail. I've applied it on .buttonL, .buttonR, a, .buttonL a, .buttonR a, .buttonL:link, .buttonL:active, .buttonR:link, .buttonR:active, .buttonL a:link, .buttonL a:active, .buttonR a:link, .buttonR a:active.
I've also tried doing
border-bottom: none;
and
box-shadow: none;
, also to no avail.
Any ideas as to what I'm doing wrong?
P.S. I can't link the page I'm referencing, as it is on an internal network. Sorry...
Here's a screenshot of the page:
The links in question are the arrows to either sides. Although the other links have the same problem.
Use This CSS may be help you thanks
body .buttonL, body .buttonR {
text-decoration: none !important;
}
OR USE THIS
body a{
text-decoration: none !important;
}
I just found the solution:
For some reason the background gradient (although it was white) left a line at the backgrounds border (or center - I'm not sure). To remove this, I added
.entry-content a{background-image:none;}
to the css file, instead of just making it transparent.
Thanks for all the help :D
If the css is not working means then use jquery
<script>
$(document).ready(function(){
$('.buttonL').css('text-decoration','none');
$('.buttonR').css('text-decoration','none');
});
<script>
I hope this will solve your issue.
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'm working on a really simple little bit of CSS, where the cursor changes to a pointer when the mouse moves over it.
I've been looking at this code for hours, and I can't figure out why the cursor will not change to a pointer. When I move over the div, it changes briefly and then changes back to arrow.
It's probably something really simple, but I just cannot see it.
.holder{
width:1000px;
overflow: auto;
margin: 0 auto;
font-family: 'Abel';
padding-left: 50px;
padding-top: 50px;
position: relative;
}
.action_pod{
float:left;
border-radius: 10px;
border: 1px solid #777;
font-family: 'Abel';
margin: 10px;
overflow: hidden;
padding:2px;
cursor:pointer;
}
.act_pod{
background-color: #cf9b63;
color: #fff;
width:100%;
border-radius: 7px;
padding-left: 3px;
padding-right: 3px;
font-size: 1em;
text-align: center;
cursor: pointer;
}
a:link{
text-decoration: none;
color:inherit;
cursor: pointer;
}
a:visited{
text-decoration: none;
color:inherit;
cursor:pointer;
}
<div class="holder">
<div class="action_pod">
<div class="act_pod">
add new raw season
</div>
</div>
</div>
update: Thanks for all the suggestions. I've tried them all and so far nothing has worked. I'm wondering if there's something hinky in my browser now...
update 2: Looks like its an error on my Mac somehow, as no links on any website make the cursor become a pointer. Surprised my question got marked down as I was only seeking help on an issue I was having and gave all the info I had as I went along.
update 3: Apparently it's an issue with running Photoshop CC on Mac at the same time. Found the solution here if anyone has the same problem in the future. https://apple.stackexchange.com/questions/151370/my-cursor-is-wrong-in-certain-apps-safari-chrome-mail
You should use
divName:hover {
cursor: pointer;
}
Add the CSS to the parent div
holder:hover {
cursor: pointer;
}
Remove all the cursor:pointer; bits you have right now in your code, and add this to your css:
.act_pod:hover{
cursor: pointer;
}
It's really simple try this.
body{cursor:default;}.holder a:hover{cursor:pointer;}
Remove All Cursors In Other Div's Classes
And Add This Property In Your Class
.holder:hover{
........
cursor:pointer;
}