I know this questions has been asked a dozen times, but I can't seem to get my button to have a hover and pressed effect. I am trying to have the color of my button change when I hover over it. I would also like the button to have an active pressed effect when clicked. I feel like it has something to do with my css linkage, but I have tried a bunch of different combinations and still can't get it to work.
HTML
<a href="#">
<button>Click for Plans</button>
</a>
css
button {
background-color: #3AF8AB;
border-style: none;
color: white;
position: absolute;
border-radius: 10px;
font-size: 3.5vmin;
margin-top: 0px;
font-weight: bold;
padding: 7px;
margin-left: 73%;
margin-right: 1%;
cursor: pointer;
}
.button:hover {
background-color: blue;
transition: 0.7s;
}
.button:active {
background-color: blue;
box-shadow: 0 5px #666;
transform: translatey(4px);
}
button:hover and button:active in css are class and you have element. You can add the class button to your button or change the style to button ( and not .button )
button {
background-color: #3AF8AB;
border-style: none;
color: white;
position: absolute;
border-radius: 10px;
font-size: 3.5vmin;
margin-top: 0px;
font-weight: bold;
padding: 7px;
margin-left: 73%;
margin-right: 1%;
cursor: pointer;
}
button:hover {
background-color: blue;
transition: 0.7s;
}
button:active {
background-color: blue;
box-shadow: 0 5px #666;
transform: translatey(4px);
}
<button>Click for Plans</button>
Related
i have a button with the following structure:
<button className='ctaBtn'>
<a href={props.url}>Open</a>
</button>
And this is its styles:
.ctaBtn{
border-radius: 5px;
width: 70px;
height: 40px;
padding: 10px;
border: .5px solid rebeccapurple;
background-color: white;
color: rebeccapurple;
font-weight: 700;
font-size: 18px;
cursor: pointer;
margin-top: 15px;
margin-bottom: 30px;
}
.ctaBtn:hover{
background-color: rebeccapurple;
}
.ctaBtn a:hover{
text-decoration: none;
color: white;
}
.ctaBtn a{
list-style-type: none;
text-decoration: none;
color: rebeccapurple;
}
As i hover over the button the background color changes to purple and as i hover over the a tag the font color changes to white. The issue is that before i get with the cursor to the a tag the button background is purple and the text is also purple. What i want to achieve is that as soon is pass through the button both css properties are activated the background color purple for the button and the white color for the text. How can i achieve this?
We combine some of your properties and hit the nested anchor tag from the parent action. See example below, but see additional info below.
.ctaBtn{
border-radius: 5px;
width: 70px;
height: 40px;
padding: 10px;
border: 1px solid purple;
background-color: white;
color: purple;
font-weight: 700;
font-size: 18px;
cursor: pointer;
margin-top: 15px;
margin-bottom: 30px;
transition: background-color .25s ease, color .25s ease;
}
.ctaBtn:hover{
background-color: purple;
}
.ctaBtn:hover a {
color: white;
}
.ctaBtn a {
text-decoration: none;
}
<button class='ctaBtn'>
Open
</button>
On a side note though, you shouldn't nest an anchor tag inside a button as they're mutually exclusive in use. I'd prefer to see something like this instead for WCAG and semantic purposes.
.ctaBtn{
border-radius: 5px;
height: 40px;
padding: 10px;
border: 1px solid purple;
background-color: white;
color: purple;
font-weight: 700;
font-size: 18px;
cursor: pointer;
margin-top: 15px;
margin-bottom: 30px;
transition: background-color .25s ease, color .25s ease;
}
.ctaBtn:hover{
background-color: purple;
color: white;
}
<button class='ctaBtn'>
WORDS
</button>
Or swap button for <a> tag instead but neither as a child of one another.
It's because you set a padding on the button so the a tag is smaller than its parent -> your problem.
Another thing: Don't use an a tag in a button tag, it's accessibility complete nonsense. You only need an a tag and a span.
<a href="#" class="ctaBtn">
<span>Open</span>
</a>
How to add border bottom on hover effect as in this image
Add :hover for your button like this:
button {
width: 300px;
height: 60px;
border-radius: 10px;
background-color: #d94346;
border: none;
color: white;
font-weight: bold;
font-size: 1.3rem;
}
/* Add hover effect */
button:hover {
border-bottom: #bb262a 6px solid;
}
<button>Hover</button>
Is this result what you were expecting for ?
A box-shadowwould be more appropriate in my opinion.
EDIT: Comparing to the other answers I see, this way the button text won't move. 2 options.
button {
font-size: 30px;
padding: 30px 250px;
color: white;
background-color: #d84446;
border: none;
border-radius: 15px;
}
button:hover {
box-shadow: 0px 7px 0px #bb262a;
cursor: pointer;
}
<button>Hover</button>
you should do it in the other order
button:hover {
border-bottom: 4px solid #bb262a;
}
I want to make different color transitions when someone clicks the button and releases again.
As you can see below, when you click the button, the color is instant but when you release it, it's not instant. How can I do this?
.submitBtn {
position: absolute;
display: block;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 225px;
height: 40px;
border: 3px solid #1c215e;
border-radius: 5px;
color: #9fa6fc;
background-color: #1c215e;
font-size: 16px;
margin-top: 150px;
transition: color 1s, background-color 1s;
}
.submitBtn:hover {
color: black;
background-color: #4a53c2;
}
.submitBtn:active {
color: #3e46a8;
border-color: #3e46a8;
transition: 0s;
}
<button class="submitBtn" type="submit">Login</button>
Here is a trick using text-shadow that will replace the main color on hover and default state and for the active you use color with no transition:
.submitBtn {
display: block;
margin: auto;
border-radius: 5px;
font-size: 20px;
padding: 10px 50px;
border: 3px solid #1c215e;
color: #0000;
text-shadow: 0 0 #9fa6fc;
background-color: #1c215e;
cursor: pointer;
transition: text-shadow 1s, background-color 1s;
}
.submitBtn:hover {
background-color: #4a53c2;
text-shadow: 0 0 black;
}
.submitBtn:active {
color: red;
border-color: #3e46a8;
}
<button class="submitBtn" type="submit">Login</button>
I am building a contact form using the divi builder's module.
Divi's contact form already comes with a button and I need to customize it by adding html span tags within the button tag.
.link--button {
font-family: "Raleway", sans-serif;
font-size: 15px;
line-height: 22.6px;
background-color: transparent;
padding: 16px 32px 16px 40px;
cursor: pointer;
border: 4px solid #000000;
color: #000000;
}
.link--button:hover .arrow {
transition: all 0.4s ease;
width: 35px;
margin-right: 5px;
}
.arrow {
height: 2px;
width: 25px;
position: relative;
display: inline-block;
cursor: pointer;
margin-right: 15px;
margin-bottom: 4px;
background: black;
}
arrow:before {
right: -2px;
bottom: -3px;
transform: rotate(-45deg);
background: black;
}
.arrow:after {
right: -2px;
top: -3px;
transform: rotate(45deg);
background: black;
}
.arrow:before,
.arrow:after {
content: "";
background: black;
position: absolute;
height: 2px;
width: 10px;
border-radius: 30%;
}
<button class="link--button btn--black">
<span class="arrow arrow--black"></span>Submit
</button>
How can I modify divi's html to insert the arrow?
I found the answer. In the Divi Themes integration tab, use jquery to prepend the HTML as so:
jQuery(document).ready(function(){
jQuery(".my-form .et_pb_button").prepend('<span class="arrow arrow--black"></span>');
});
This adds the HTML tag inside of the form's button
I'm trying to change the text of the button when you hover on it, I found a solution but for some reason it won't work.
What I want to happen is when I hover on it it will turn to green and change the text to Completed!.
Currently the button changes color when I hover on it but the text wont change.
Here's my css:
.button {
border: 0px solid #004B84;
background: red;
padding: 3px 21px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
color: #ffffff;
font-size: 12px;
font-family: Questrial;
text-decoration: none;
vertical-align: middle;
letter-spacing: 2px;
}
.button:hover {
border: 0px solid #1292e1;
background: green;
color: white !important;
content: "Completed!" !important;
}
.button:active {
background: #1292e1;
color: white;
text-decoration: none !important;
}
<button class="button" type="submit" name="completed" value="">New Request</button>
And here's the html for the button:
<button class="button" type="submit" name="completed" value="">New Request</button>
You could do this using a psuedo element.
.button {
width: 150px; /* set a width so it doesnt change upon hover */
border: 0px solid #004B84;
background: red;
padding: 3px 21px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
color: #ffffff;
font-size: 12px;
font-family: Questrial;
text-decoration: none;
vertical-align: middle;
letter-spacing: 2px;
}
.button:hover span {
display:none
}
.button:hover:before {
content:"Completed!";
}
.button:hover {
background-color: green;
}
<button class="button">
<span>New request</span>
</button>
CSS (without HTML):
You don't need to touch your HTML (manually adding <span> tags, manually
removing HTML element content, etc) for this.
Just set the button's text content font-size to 0px then add your own text and font-size to the button using :hover, ::after and ::after:hover.
Check and run the following Code Snippet for a practical example of using just CSS to edit your button's content:
.button {font-size: 0px;min-width: 100px;min-height: 22px;}
.button::after {font-size: 14px;}
.button::after {
content: "New Request";
}
.button:hover::after {
content: "Completed!";
}
.button:hover {
background-color: green;
border: 0px solid #1292e1;
color: white !important;
}
<button class="button" type="submit" name="completed" value="">New Request</button>
JavaScript:
Just use the textContent() property to change your text on hover (mouseover) to Completed and back to New Request when hovered out (mouseout).
Check and run the following Code Snippet for a practical example of the JavaScript approach above:
var btn = document.querySelector(".button");
btn.addEventListener("mouseover", function() {
this.textContent = "Completed!";
})
btn.addEventListener("mouseout", function() {
this.textContent = "New Request";
})
.button {
min-width: 100px;
min-height: 22px;
}
.button:hover {
background-color: green;
border: 0px solid #1292e1;
color: white !important;
}
<button class="button" type="submit" name="completed" value="">New Request</button>
#K. Rogers Try Code Hope This Will Work For You!
/* .button */
.button {
display: inline-block;
position: relative;
border: 0px solid #004B84;
background: red;
padding: 8px 25px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
color: #ffffff;
font-size: 12px;
font-family: Questrial;
text-decoration: none;
vertical-align: middle;
letter-spacing: 2px;
overflow: hidden;
}
.button:hover { background: green; }
.button span {
transition: 0.6s;
transition-delay: 0.2s;
}
.button:before,
.button:after {
content: '';
position: absolute;
top: 0.67em;
left: 0;
width: 100%;
text-align: center;
opacity: 0;
transition: .4s,opacity .6s;
}
/* :before */
.button:before {
content: attr(data-hover);
transform: translate(-150%,0);
}
/* :after */
.button:after {
content: attr(data-active);
transform: translate(150%,0);
}
/* Span on :hover and :active */
.button:hover span,
.button:active span {
opacity: 0;
transform: scale(0.3);
}
/* :before pseudo-element on :hover
and :after pseudo-element on :active */
.button:hover:before,
.button:active:after {
opacity: 1;
transform: translate(0,0);
transition-delay: .4s;
}
.button:active:before {
transform: translate(-150%,0);
transition-delay: 0s;
}
<button class="button" type="button" data-hover="COMPLETED" data-active="I'M ACTIVE"><span>New Request </span></button>
Here is one more solution wit no change button html-code. Just using css style of pseudo-element ::after
To prevent a change of button width on hover you need to define width property.
.button {
border: 0px solid #004B84;
min-width: 150px;
background: red;
padding: 5px 21px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
color: #ffffff;
font-size: 12px;
font-family: Questrial;
text-decoration: none;
vertical-align: middle;
letter-spacing: 2px;
}
.button:hover {
background: green;
}
.button::after {
content: "New request!";
}
.button:hover::after {
content: "Completed!";
}
.button:active {
background: #1292e1;
}
.button:active::after {
background: #1292e1;
}
<button class="button" type="submit" name="completed" value=""></button>
See:
https://www.w3schools.com/cssref/pr_gen_content.asp
The content property is used with the ::before and ::after
pseudo-elements, to insert generated content.
You will need Javascript or more.
e.g.
<button class="button" type="submit" name="completed" value="" onmouseover="document.getElementsByName('completed')[0].innerHTML ='Completed!';" onmouseleave="document.getElementsByName('completed')[0].innerHTML ='New Request';">New Request</button>
If you want to change the value of an element on a page, then you need to do it per code - try to do it with JavaScript
Edit:
Seems like there is a way:
How can I replace text with CSS?