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>
Related
I'm unable to get the hover background color timing to sync with :before. How can I fix this issue?
When you hover over the button, you will notice the transition of the background color is not in sync.
JSFIDDLE DEMO: https://jsfiddle.net/7c25wmuz/
.btn-primary {
background-color: #2c9ff5;
border-color: #2c9ff5;
text-transform: capitalize;
}
.btn.btn-primary:hover {
background-color: #45aff6;
border-color: #45aff6;
}
.btn-donate {
background-color: #053a86;
color: #fff;
margin-left: 15px;
padding-left: 40px;
padding-right: 30px;
padding-top: 2px;
text-transform: uppercase;
border-radius: 4px 0 0 4px;
height: 30px;
position: relative;
border: none;
}
.btn-donate:before {
content: '';
position: absolute;
top: 0;
left: 0;
border-top: 30px solid white;
border-right: 20px solid #053a86;
width: 0;
}
.btn-donate:hover::before {
border-right: 20px solid #45aff6;
}
Donate
Clip path is the solution you need for something like this.
.btn-primary {
background-color: #2c9ff5;
border-color: #2c9ff5;
text-transform: capitalize;
clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
}
.btn.btn-primary:hover {
background-color: #45aff6;
border-color: #45aff6;
}
.btn-donate {
background-color: #053a86;
color: #fff;
margin-left: 15px;
padding-left: 40px;
padding-right: 30px;
padding-top: 2px;
text-transform: uppercase;
border-radius: 4px 0 0 4px;
height: 30px;
position: relative;
border: none;
transition: .5s all ease;
}
Donate
You can just add a background transition to .btn-donate and border transition to .btn-donate:before like so:
(added padding bottom to see things)
body {
margin-top: 15px;
}
.btn-primary {
background-color: #2c9ff5;
border-color: #2c9ff5;
text-transform: capitalize;
}
.btn.btn-primary:hover {
background-color: #45aff6;
border-color: #45aff6;
}
.btn-donate {
background-color: #053a86;
color: #fff;
margin-left: 15px;
padding-left: 40px;
padding-right: 30px;
padding-top: 2px;
padding-bottom: 1rem;
text-transform: uppercase;
border-radius: 4px 0 0 4px;
height: 30px;
position: relative;
border: none;
transition: .3s ease background;
}
.btn-donate:before {
content: '';
position: absolute;
top: 0;
left: 0;
border-top: 30px solid white;
border-right: 20px solid #053a86;
width: 0;
transition: .3s ease border;
}
.btn-donate:hover::before {
border-right: 20px solid #45aff6;
}
Donate
It seems you runned into conflict with browser default styles. You can see default styles in your Developer tools (F12) you just need to enable it. Go to developer tools settings and check "Show browser styles".
This issue can be simply fixed by overriding default styles with your own.
body {
margin-top: 15px;
}
.btn {
transition: unset; /* override, this is all you need */
display: block;
height: 30px;
}
.btn-primary {
background-color: #2c9ff5;
border-color: #2c9ff5;
text-transform: capitalize;
}
.btn.btn-primary:hover {
background-color: #45aff6;
border-color: #45aff6;
}
.btn-donate {
background-color: #053a86;
color: #fff;
margin-left: 15px;
padding-left: 40px;
padding-right: 30px;
padding-top: 2px;
text-transform: uppercase;
border-radius: 4px 0 0 4px;
height: 30px;
position: relative;
border: none;
}
.btn-donate:before {
content: '';
position: absolute;
top: 0;
left: 0;
border-top: 30px solid white;
border-right: 20px solid #053a86;
width: 0;
}
.btn-donate:hover::before {
border-right: 20px solid #45aff6;
}
Donate
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>
Hi I'm trying to make a simple text pop-up button using just html and CSS. I looked at a bunch of examples but most of them use JavaScript in some way so I cant use them. found some that is pure CSS but when I tried them, they all do this weird thing where closing the pop-up brings me to top of page. Any help is appreciated. Thanks
jsfiddle: http://jsfiddle.net/hjrudc5n/
This is my HTML
```
<div class="box"><a class="button" href="#popup1">Show Overlay</a></div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">Content</div>
</div>
</div>
</div>
and this is my CSS
/*pop up overlay */
.box {
width: 20%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid blue;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: blue;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
Check this out:
http://jsfiddle.net/aj43psdw/13/
The problem with your code was that using "#" as an href will always take you to the top of the page, no matter what. Also, makes thing hard to control.
What you can do. is work with labels and checkboxes, and control the "state" of things via that.
Like this:
[name="popup"]{
width:0;
height:0;
overflow:hidden;
position:relative;
z-index:-1;
pointer-events:none;
}
[name="popup"]:checked ~ .overlay{
visibility: visible;
opacity: 1;
}
In the fiddle I linked you, clicking the button will check the checkbox, that we'll show via css. the X button will do the same, unchecking it.
It was because of href="#" of the anchor tag you were using, which led to going to top of page on closing the popup.
A workaround is to use <input type="checkbox" /> (so that you can use :checked selector) along with <label>(so that you can still interact with checkbox after hiding it), to hide, and unhide the popup.
/*pop up overlay */
.box {
width: 20%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid blue;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: blue;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
#pop:checked + .overlay {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#pop{
display: none; /*Hide the checkbox*/
}
<div class="box"><label class="button" for="pop">Show Overlay</label></div>
<input type="checkbox" id="pop" />
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<label class="close" for="pop">×</label>
<div class="content">Content</div>
</div>
</div>
I have my button where after clicking i am giving it a box-shadow just say in the active property like
.thankyou_button_active {
background-color: #ff9d72;
color: white;
border: 1px solid #ff9d72;
width: 120px;
outline: none;
height: 31px;
font-weight: 700;
border-radius: 30px;
transition: transform 1s all;
font-size: 15px;
padding: 6px 10px;
margin-bottom: 1rem;
}
.thankyou_button_active:active {
transition: transform 1s all;
box-shadow:0 0 10px #ff9d72;
}
so in the 'active' property i tried to apply transition property but it doesnt work out...does transtion in
class:active
works in a different manner ??
transition: transform 1s all is not a legit shorthand value, see transition for more information.
You need to put transition to main class(in this case, .thankyou_button_active), and put the changed properties to property selector class: .thankyou_button_active:active. Unless you want to set the duration separately, check this for example:
.thankyou_button_active {
background-color: #ff9d72;
color: white;
border: 1px solid #ff9d72;
width: 120px;
outline: none;
height: 31px;
font-weight: 700;
border-radius: 30px;
transition: box-shadow 1s;
font-size: 15px;
padding: 6px 10px;
margin-bottom: 1rem;
box-shadow:0 0 0px #ff9d72;
}
.thankyou_button_active:active {
box-shadow:0 0 10px #ff9d72;
transition-duration: 0.05s;
}
<button class="thankyou_button_active">Thank You</button>
http://jsfiddle.net/93bphr4f/
html:
<button type="button" onClick="location.href='#'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>
css:
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
look at it,
I dont know why when I hover mouse on button, text move to top..
I want to text be still on center of button.
What i doing wrong?
Anyone can help?
Don't know why you complicated it too much but you simple use line-height equal of element height:
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
line-height: 75px;/*add line height equal of element height*/
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
<button type="button" onClick="location.href='./freeaccess'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>
You shouldn't use the :after tag at all in this situation.
// All the positioning made the button go crazy.
You should do it this way:
Use .buttonClass { } to set the basic button styling, and use .buttonClass:hover { } to only change the background of the button. You don't have to duplicate every item in the :hover part.
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
border-radius: 5px;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
height: 75px;
width: 100%;
background: #e57780;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
.buttonpink2:hover {
background: #c24e57;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
}
Strange way to do, why are you using pseudo-elements just in order to change background-color ?
.buttonpink2:after {
height: 75px;
line-height:75px;
...
}
will solve your problem, but I suggest you to remove the .buttonpink2:after element and just change the background-color of the button
If you would rather using padding instead of line-height, you can do this:
.buttonpink2:after {
height: 50%;
padding: 20px 0;
}
You can add some letter-spacing on :after to solve it, I just added 0.3px, you can try other values to make it better.
/* PINK BUTTON 2 */
.buttonpink2 {
font-weight: bold;
font-size: 30px;
color: white;
cursor: pointer;
cursor: hand;
border-radius: 5px !important;
box-shadow: 4px 4px 4px #b5bcc2;
border: 0;
background-repeat: no-repeat;
background: #e57780;
height: 75px;
width: 100%;
position: relative;
}
.buttonpink2:after {
border-radius: 5px !important;
content: "Claim 10 Free Student Accounts for Your School";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: #c24e57;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
letter-spacing: 0.3px
}
.buttonpink2:hover:after {
opacity: 1;
}
.buttonpink2 p {
color: #fff;
z-index: 1;
position: relative;
}
<button type="button" onClick="location.href='#'" class="buttonpink2">Claim 10 Free Student Accounts for Your School</button>