So I have button defined by the a-tag which says:
.button {
background: #aaaaaa;
padding: 20px 30px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
border-radius: 15px;
box-shadow: 0px 3px 0px #999999;
cursor: pointer;
}
.button:hover {
background: #a1a1a1
}
.button:active {
box-shadow: 0px 0px 0px #999999;
}
Click me
So pretty straight forward. A button, a hover effect, and an active effect. However, what I would actually like is the effect of pushing the button. Now the box-shadow just disappears, but the button itself doesn't go "down" so to speak...
It's pretty easy with just a button, but I need this for a -button. Can it be done ? :)
You can add position: relative to the button and add top: -1px on :active for 1px top offset.
.button {
background: #aaaaaa;
padding: 20px 30px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
border-radius: 15px;
box-shadow: 0px 3px 0px #999999;
cursor: pointer;
position: relative;
}
.button:hover {
background: #a1a1a1
}
.button:active {
top: -1px;
}
Click me
You can use the transform scale property. This will make an illusion that the button is clicked since it becomes smaller on active.
.button {
transition: all 1s;
}
.button:active {
transform:scale(0.8,0.8);
}
https://www.w3schools.com/cssref/playit.asp?filename=playcss_transform_scale
You can do that manually like that :
.button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_buttons_animate3
Or you could also use the material design through the materialize package:
https://www.w3schools.com/w3css/w3css_material.asp
And this is an example for buttons :
<a class="waves-effect waves-light btn">button</a>
http://materializecss.com/buttons.html
Related
I am using Safari browser and I have buttons like this -
On hover these look like as below -
I haven't added any css from my side but on inspect element I got this-
button:hover {
box-shadow: 0px 0px 1px #b2b2b2;
border-left-color: #575757;
border-right-color: #575757;
}
I want to make it look like same on hover or not hover. So I tried setting css as-
button:hover {
box-shadow: none;
border-left-color: none;
border-right-color: none;
}
But it's not working.
You can use this code
button {
box-shadow: 0px 0px 1px #b2b2b2;
background-color: #ffffff;
border: 1px solid #575757;;
outline: none;
padding: 15px 30px;
text-decoration: none;
border-radius: 15px;
font-size: 25px;
font-weight: 600;
color: #333333;
}
button:hover {
box-shadow: 0px 0px 1px #b2b2b2;
background-color: blue;
border: 1px solid #575757;;
outline: none;
padding: 15px 30px;
text-decoration: none;
color: white;
}
<button type="button">Prev</button>
<button type="button">1</button>
<button type="button">2</button>
<button type="button">3</button>
<button type="button">Next</button>
I'm trying to add a button that will look something along the lines of the orange "Get It Now" button found here: https://www.wpbeaverbuilder.com/
The guides I found on the topic focus on specific themes which I don't use, and so I'm currently stuck. How can I do that?
My website: https://roi.pub
Thanks.
Here a code snippet for the button. Add the css on the custom style of wordpress, and the class for the button in your menu item.
Don't be freaked about the font, it will get the font that is used in your theme.
.menu-btn {
background-color: #F7951E;
color: #fff;
padding: 6px 18px 3px !important;
border-radius: 5px;
border-bottom: 2px solid #D4821F;
font-weight: 600;
font-size: 14px;
position: relative;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
top: 2px;
text-decoration: none;
transition: background .3s;
}
.menu-btn:hover {
color: #fff;
background-color: #D4821F;
}
<a class="menu-btn" href="#"> Get It Now </a>
EDIT:
Code for you website's menu :
.menu-btn {
line-height: 1;
margin-top: 25px;
background-color: #F7951E;
color: #fff !important;
padding: 10px 18px 7px !important;
border-radius: 5px;
border-bottom: 2px solid #D4821F;
font-weight: 600;
font-size: 14px;
position: relative;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
top: 2px;
text-decoration: none;
transition: background .3s;
}
Try this
https://codepen.io/anon/pen/JMQNZE
button {
border: 0;
background-color: #F7951E;
color: #fff;
padding: 6px 18px 3px;
border-radius: 5px;
border-bottom: 2px solid #D4821F;
font-weight: 600;
font-size: 14px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
top: 2px;
}
button:hover {
color: #fff;
background-color: #db7f0f;
cursor: pointer;
}
You can inspect any element from a page and see it's css attributes.
I'm trying to achieve a 'press' button effect with a <button> and a <span> but for some reason the shadow is getting cut off on Safari ONLY.
I'm using two tags here because that's a limitation of the website i'm editing, I can't change the markup.
It's simple as this, HTML:
<button><span>A simple fucking button</span></button>
CSS:
button {
-webkit-appearance: none;
border: none;
background: none;
padding: 0;
margin: 0;
}
button span {
text-transform: uppercase;
font-weight: bold;
border: 3px solid black;
padding: 10px 35px;
border-radius: 2em;
display: block;
background-color: #fff;
box-shadow: 0px 4px 0px -2px #bfbfbf,
0px 5px 0px 0px black;
}
button:active,
button:hover {
color: inherit;
}
button:hover {
span {
transform: translate(0px, 5px);
box-shadow: 0px 0px 0px 0px;
}
}
codepen.io example:
https://codepen.io/marlonmarcello/pen/dVBKpd
If you are open to dropping the span, then the button and styles can be adjusted to achieve the desired effect:
https://codepen.io/enquiren/pen/qMzLrd
button {
-webkit-appearance: none;
border: none;
background: none;
padding: 0;
margin: 0;
cursor: pointer;
&.pushable {
text-transform: uppercase;
font-weight: bold;
border: 3px solid black;
padding: 10px 35px;
border-radius: 2em;
display: block;
background-color: #fff;
box-shadow: 0px 4px 0px -2px #bfbfbf,
0px 5px 0px 0px black;
&:hover {
transform: translate(0px, 5px);
box-shadow: 0px 0px 0px 0px;
}
}
}
<button class="pushable">A simple button</button>
This is the top part:
button {
background-color: gray;
color: #fff;
border: none;
border-radius: 3px;
padding: 3px 10px;
cursor: pointer;
min-width: 1%;
min-height: 30px;
margin: 1px 0;
font-size: 16;
font-weight: bold;
box-shadow: 4px 4px 2px 0px #333333;
}
.blue-btn {
background-color: #337AB7;
}
.green-btn {
background-color: #008000;
}
.red-btn {
background-color: #FF0000;
}
Here comes my problem…..
.button:hover {
background-color: #3e8e41;
box-shadow: 0px 0px 0px 0px;
}
This one only work if the class is button (it does not work for blue/green/red buttons)
So I tried this instead
.button:hover, blue-btn:hover, green-btn:hover, red-btn:hover {
background-color: #3e8e41;
box-shadow: 0px 0px 0px 0px;
}
Still only works for button class
So I tried this one
.blue-btn:hover {
background-color: #3e8e41;
box-shadow: 0px 0px 0px 0px;
}
.green-btn:hover {
background-color: #3e8e41;
box-shadow: 0px 0px 0px 0px;
}
.red-btn:hover {
background-color: #3e8e41;
box-shadow: 0px 0px 0px 0px;
}
That worked – but it seem to me its a bit stupid to write the same bit again and again and again……
Anyone got a tip?
Use button:hover instead of .button:hover .
First off, you're confusing element names with classes. A button is an actual element (<button></button>) and .button is a class you've created.
I don't know if what you have is a button with the class of button because you didn't post any HTML but know that isn't good practice, it's redundant and confusing.
Give all the elements that you want to have a hover effect an encompassing class like .hover and the specific class of .blue or .red as applicable to the color you want.
.hover {
background: #3e8e41;
box-shadow: 0px 0px 0px 0px;
}
.blue {
background: #337AB7;
}
.green {
background: #008000;
}
.red {
background: #FF0000;
}
i'm making a button and I want to achieve an insteresting effect that you can see here.
The problem is that when on hover I put to the text rgba(0,0,0,0.0); all the button turns white, even the text.
Here's my code so far:
.button{
height: 40px;
border-radius: 5px;
border: 2px solid #fff;
text-align: center;
font-size: 16px;
color: #fff;
line-height: 2.4em;
cursor: pointer;
}
.button:hover{
background: #fff;
color: rgba(0,0,0,0.0)
}
The reason is because your hover color: was set to transparent, so of course it will be white. Try something simpler like below:
.button {
color: blue;
background: white;
padding: 5px 10px;
border: 3px solid blue;
border-radius: 5px;
text-decoration: none;
transition: all 0.3s;
}
.button:hover {
color: white;
background: blue;
}
button
The problem is that, you have set the text color opacity to 0 so it is like your text is completely transparent. You can simply match it to your body's background color like I did below. No need to mention the opacity, it is 1 by default.
Fixed and working code snippet:
body{
background: #0E80C6;
}
.button{
height: 40px;
border-radius: 5px;
border: 2px solid #fff;
text-align: center;
font-size: 16px;
color: #fff;
line-height: 2.4em;
cursor: pointer;
background: transparent; /* background changed to transparent so it shows the body's background color */
}
.button:hover{
background: #fff;
color: #0E80C6; /* color matched to that of the background */
}
<button class="button">Button</button>
Your issue was you had the opacity of the text color set to 0%. The last letter in rgba means "alpha" or opacity.
body {
background-color: rgba(42, 148, 245, 1.00);
}
.button {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: transparent;
height: 40px;
border-radius: 5px;
border: 2px solid #fff;
text-align: center;
font-size: 16px;
color: #fff;
line-height: 2.4em;
padding-left: 40px;
padding-right: 40px;
cursor: pointer;
}
.button:hover {
background: #fff;
color: rgba(42, 148, 245, 1.00);/*Set this to whatever you have for the background color. the "1.00" is the opacity"*/
}
<input type="button" value="button" class="button">
RGBA(red, green, blue, alpha)
The problem is you had the opacity(alpha value) of text is 0
body{
background: blue
}
.button{
background: transparent;
height: 40px;
border-radius: 5px;
border: 2px solid #fff;
text-align: center;
font-size: 16px;
color: #fff;
line-height: 2.4em;
cursor: pointer;
}
.button:hover{
background: #fff;
color: blue
}
<button class="button">Button</button>