That's my first try:
.pricingTable-firstTable_table__getstart {
color: white;
background-color: #71ce73;
margin-top: 30px;
border-radius: 5px;
cursor: pointer;
padding: 15px;
box-shadow: 0px 3px 0px 0px #66ac64;
letter-spacing: 0.07em;
transition: all 0.4s ease;
}
<div class="pricingTable-firstTable_table__getstart" href="https://website.com">JOIN</div>
It doesn't click, and doesn't change anything, I appreciate the help
The usual way to achieve this is wrapping your div inside an a tag:
<a href="https://website.com">
<div class="pricingTable-firstTable_table__getstart">JOIN</div>
</a>
You could also solve this (less elegantly imo) using an onclick event in JavaScript:
<div class="pricingTable-firstTable_table__getstart" onclick="window.location.href='https://website.com';">JOIN</div>
If you want an anchor link to look like a button. Style it something like this:
Css
.link-button {
padding: 5px 10px 5px 10px;
border: 1px solid blue;
background-color: lightblue;
}
.link-button:hover {
background-color: blue;
cursor: pointer;
}
And the markup
<a class="link-button">Anchor as button</a>
But I prefer to use buttons for operations, and show navigation as anchors. Because people recognize them for that.
Related
I am currently working on making a website for my startup Virtual Business, and I am trying to make the <input> tag let me download a file.
Current Code, which I have used from other Stack Overflow Posts
<input type="button" value="Download" classs="buyButton"onclick="href='google.com'">
I have all of the CSS laid out, and the button is functional, but just needs to look like the button on the far right Image at this link
Add CSS like this:
.buyButton {
background-color: #C0C0C0;
border: none;
color: white;
padding: 10px 50px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.buyButton:hover {
background-color: black;
color: white;
}
<input type="button" value="Download" class="buyButton" onclick="location.href='google.com'">
Bootstrap has a variety of different buttons to choose from.
For your button to appear on the far right, use css styling float:right;
https://getbootstrap.com/docs/4.0/components/buttons/
<button type="button" class="btn--download" onclick="location.href='stackoverflow.com'">Download</button
.btn--download {
border-radius: 7px;
box-shadow: none;
color: black;
cursor: pointer;
padding: 10px 15px;
transition: ease .4s background-color, ease .4s color .4s
}
.btn--download:hover {
background-color: black;
color: white;
}
I am trying to code a button that changes color when you hover over it/click on it. However, I ran into an issue. There is a space between the text and the edges of the div section, and if you hover over the button, it turns black but the text does not turn white. I put color:white;. I am not sure as to why this does not fix the problem.
Here is my code:
p {
margin: 0px;
}
.button {
width: 66px;
height: 20px;
border: 2px black solid;
border-radius: 4px;
padding: 5px;
}
.button:hover {
background-color: black;
color: white;
}
a {
color: black;
text-decoration: none;
}
a:hover {
color: white;
}
<div class="button">
<p> Click Me! </p>
</div>
just change your a:hover to .button:hover a
everything will look great. :>
p {
margin: 0px;
}
.button {
width: 66px;
height: 20px;
border: 2px black solid;
border-radius: 4px;
padding: 5px;
}
.button:hover {
background-color: black;
color: white;
}
a {
color: black;
text-decoration: none;
}
.button:hover a{
color: white;
}
<div class="button">
<p> Click Me! </p>
</div>
Ok so heres the deal. You made it too complex. If you had problem with the spaces, its because < a > tag is diplayed inline by default and it makes gap between it's container sometimes.
Here's your code, cleaned and working : https://jsfiddle.net/m6dphvm1/
<a class="button" href="https://www.google.com"> Click Me! </a>
a.button {
border: 2px black solid;
border-radius: 4px;
padding: 5px;
color: black;
text-decoration: none;
display: inline-block;
}
a.button:hover {
background-color: black;
color: white;
}
The problem with your CSS is that your anchor(link) color is black, when you hover on the button you are changing the background of button to black, i.e both anchor color and background are black. due to that text is not being visible.
Change either background-color of button or anchor color to a differnt color and that should work. For example I'm changing the color of anchor to blue.
.button:hover {
background-color: black;
color: white;
}
a {
color: blue;
text-decoration: none;
}
a is an inline element, meaning it's designed to be nested in plain text (or what otherwise could be). It's only occupying the immediate space around the text.
However, a tags are also totally allowed to wrap around elements according to the HTML5 spec (not that anyone would stop you otherwise, it's just convention). So if you want the a tag to occupy the entire space just wrap it around the element.
Better yet, only use the a tag. The rest is basically redundant:
<a class="button" href="https://www.google.com">
Click Me!
</a>
.button {
width: 66px;
height: 20px;
border-radius: 4px;
padding: 5px;
color: black;
border: 2px black solid;
}
.button:hover {
background-color: black;
color: white;
}
https://jsfiddle.net/hyp4a9ya/
I'm trying to attach a click element only on the :after pseudo-element on the following fiddle:
<div class="tag deletable", style="style")>
Tagname
</div>
.tag {
display: inline-block;
background: white;
padding: 3px 6px;
line-height: 1em;
border-radius: 4px;
font-size: 12px;
border-right: 5px solid;
}
.deletable {
border-right: 18px solid;
position: relative;
}
.deletable:after {
content: "\D7";
position: absolute;
color: white;
right: -12px;
top: 3px;
font-size: 12px;
cursor: pointer;
}
https://jsfiddle.net/x2ztqdbm/
But it seems that is not possible. Is there a way to achieve that?
If not, can someone help me rewriting the HTML code in order to not use a pseudo-element? It's important that the :after section never breaks to the next line.
Thanks in advance.
Try This
HTML
<div class="tag deletable", style="style")>
Tagname
<span class="wrong">x</span>
</div>
CSS
.tag {
display: inline-block;
background: white;
padding: 3px 6px;
line-height: 1em;
border-radius: 4px;
font-size: 12px;
border-right: 5px solid;
}
.deletable {
border-right: 18px solid;
position: relative;
}
.wrong {
position: absolute;
color: white;
right: -12px;
top: 3px;
font-size: 12px;
cursor: pointer;
}
Preety much the same. use a font-awesome icon in place of 'x'
Link for reference
Pseudo elements (as far as I know) are not part of the DOM, so you can't attach events to them. However, why not using an inline element like a tag or something like that? It would be even easier...
You can attach a click event to a pseudo element using the pointer-events css-rule, like this: https://jsfiddle.net/cq9yzjeb/
I have a list of CSS to format my link button but it appears only working in Chrome but not IE, any ideas, the hover and everything works just not the link itself
thanks in advance
CSS
.button {
background-color: #4CAF50;
border-radius: 50%;
width: 170px;
height: 170px;
color: white;
padding: 4px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
position: absolute;
margin-top: 0px;
margin-left: 400px;
background-color: white;
color: white;
border: 4px solid #83b739;
}
.button1:hover {
background-color: #83b739;
color: white;
}
HTML
<button class="button button1">link</button>
It's probably not even a CSS issue, but rather an issue with nesting interactive elements like that.
Don't put a link inside a button. That's just bizarre. Use just the <a> element and style that.
I'm not exactly sure what would have caused your problem, however is is most likely due to a css/html nesting problem, where multiple css styles interact with the nested elements differently on different browsers? It is better to simply remove the button element in the html and just style the <a> tag to look like a button. By doing this the code is less complicated, you should have fewer problems with styles and nested elements, and this is how most make link buttons anyway. Here is an example of how I made a link button in a recent project, some of the stylings are missing (custom fonts, etc) but it shows that you don't need the button tag, it works better without it, and how to make a button with just the <a> tag.
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
color: white;
border-radius: 200px;
border: 3px solid #1A75BB;
margin: 20px 20px 0px 0px;
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover,
.btn:active {
background-color: #14598e;
border-color: #14598e;
}
.btn-full:link,
.btn-full:visited {
background-color: #1A75BB;
margin-right: 20px;
}
.btn-full:hover,
.btn-full:active {
background-color: #14598e;
}
.btn-ghost:link,
.btn-ghost:visited {
color: black;
border-color: #14598e;
}
.btn-ghost:hover,
.btn-ghost:active {
color:white;
}
Why use AnyMath?
What problems can AnyMath solve?
It’s not just about IE. Such link-inside-button does not work in Firefox too.
If you really (think twice) need this to be a button instead of just a link, remove the explicit link from your button and wrap the button in a simple form:
<form action="http://example.com/">
<button class="button button1" type="submit">link</button>
</form>
But based on your code, button element is unneeded, and you should just use a link instead:
<a href="http://example.com/" class="button button1">link</button>
Below is my problem, these are the same link and the orange background is a hover effect set in css. As you can see when the window is compressed the text of the link moves onto the next lines to fit the screen. But the background effect of each line obscures the second. I can set the display to be block, but that would stretch the background to 100% of the window, which isn't what I want when the page is not narrow.
Thanks in advance
EDIT: CODE
<div class="PageSection">
<a class="LinkButton" href="">This Is My Link, There Are Many Like It But This One Is Mine</a>
</div>
.PageSection {
width: 100%;
margin: 50px 0px 50px 0px;
text-align: center;
font-size: 30px;
}
input[type="button"],
input[type="submit"],
.LinkButton {
padding: 5px 10px 5px 10px;
cursor: pointer;
color: inherit;
font-size: inherit;
text-decoration: none;
line-height: 100%;
border: none;
background-color: transparent;
}
input[type="button"]:hover,
input[type="submit"]:hover,
.LinkButton:hover {
background-color: #FF5A19;
}
EDIT:
I know I could set the line-height css property, but that gives the link ugly spacing, and I am also aiming for a square block of background colour, just not to the full width of the page.
assuming your padding is for creating that extra block effect.
try
.PageSection {
width: 100%;
margin: 50px 0px 50px 0px;
text-align: center;
font-size: 30px;
}
input[type="button"],
input[type="submit"],
.LinkButton {
/*padding: 5px 0 5px 0;*/
cursor: pointer;
color: inherit;
font-size: inherit;
text-decoration: none;
line-height: 100%;
border: none;
background-color: transparent;
background-clip: padding-box;
}
input[type="button"]:hover,
input[type="submit"]:hover,
.LinkButton:hover {
background-color: #FF5A19;
box-shadow: 10px 0 0 0px #FF5A19,-10px 0 0 0px #FF5A19;
}
all you need on the link is background-clip: padding-box; on the link and some box-shadow to cover the extra bit where padding can't reach due to inline element behaviour.
Edit: JSFiddle
I think i have managed to do what you wanted, do you want it multi-lined even on full width or when page width is smaller
I have used multiple spans tags to controls the lines
<div class="PageSection">
<a class="LinkButton" href=""><span>This Is My Link, </span> <span> There Are Many Like </span> <span> It But This One Is Mine </span></a>
</div>
here is the fiddle on what i have achieved
I HAVE UPDATED THE FIDDLE to your desired outcome
See the FIDDLE here