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.
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 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>
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
I'm trying to make custom checkbox, like it said here
This is what I've done:
http://jsfiddle.net/216nt56y/
My css:
input[type=checkbox].css-checkbox {
visibility: hidden;
}
label.css-label
{
border-color: white;
border: white 1px solid;
border-radius: 3px;
}
input[type=checkbox].css-checkbox:checked + label:before {
content: "\2714";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 15px;
color: #f3f3f3;
text-align: center;
line-height: 15px;
}
It is not really what I want, because I want a check square to have the same size when it is unchecked.
How can I get it?
Like konrad said by giving it a width and height it will always have its shape but rather than using min-height and min-width just have height and width and then you can also move the check tick into the center of the checkbox using margin
label.css-label
{
border-color: white;
border: white 1px solid;
border-radius: 3px;
display: inline-block;
height: 18px;
width: 18px;
}
input[type=checkbox].css-checkbox:checked + label:before {
content: "\2714";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 15px;
color: #f3f3f3;
text-align: center;
line-height: 15px;
margin-left:2px;
}
here is a JSFIDDLE showing it in action
try something like this
label.css-label {
display: inline-block;
min-height: 20px;
min-width: 20px;
}
I am using AngularJS and I wonder if there are any features that can help me. I have the following button CSS:
button {
background-color: #button-background-color;
border: 1px solid #button-border;
background-color: #ccc;
border: 1px solid #999;
color: #button-color;
background: #e6e6e6;
background-image: -moz-linear-gradient(top,#fff,#d9d9d9);
background-image: -webkit-linear-gradient(top,#fff,#d9d9d9);
background-image: -o-linear-gradient(top,#fff,#d9d9d9);
background-image: -ms-linear-gradient(top,#fff,#d9d9d9);
background-image: linear-gradient(top,#fff,#d9d9d9);
border: 1px solid #ccc;
border-top-color: #ccc;
border-bottom-color: #a2a2a2;
border-radius: 4px;
text-shadow: 0 1px 0 rgba(255,255,255,1);
box-shadow: 0 1px 1px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.2);
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
display: inline-block;
line-height: 18px;
line-height: 1.8rem;
font-size: 14px;
font-size: 1.4rem;
cursor: pointer;
color: #474747;
padding: 4px 10px 3px 10px;
font-family: arial,sans-serif;
vertical-align: middle;
}
This looks good but I would like to have an effect that appears when I hover over and click on a button without yet releasing the click.
Is there any way that I can catch this with angular and have the class changed for the period when I am holding down the button?
Please note that I am looking for a CSS only or a CSS/AngularJS solution. I am not using jQuery.
Thanks
http://www.w3schools.com/cssref/sel_hover.asp
http://www.w3schools.com/cssref/sel_active.asp
button:hover button:active
button {
background-color: #button-background-color;
border: 1px solid #button-border;
background-color: #ccc;
border: 1px solid #999;
color: #button-color;
background: #e6e6e6;
background-image: -moz-linear-gradient(top,#fff,#d9d9d9);
background-image: -webkit-linear-gradient(top,#fff,#d9d9d9);
background-image: -o-linear-gradient(top,#fff,#d9d9d9);
background-image: -ms-linear-gradient(top,#fff,#d9d9d9);
background-image: linear-gradient(top,#fff,#d9d9d9);
border: 1px solid #ccc;
border-top-color: #ccc;
border-bottom-color: #a2a2a2;
border-radius: 4px;
text-shadow: 0 1px 0 rgba(255,255,255,1);
box-shadow: 0 1px 1px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.2);
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
display: inline-block;
line-height: 18px;
line-height: 1.8rem;
font-size: 14px;
font-size: 1.4rem;
cursor: pointer;
color: #474747;
padding: 4px 10px 3px 10px;
font-family: arial,sans-serif;
vertical-align: middle;
}
button:hover
{
background: red;
}
button:active
{
background: green;
}
<button>button</button>
you can put the following css:
button:active{
background-color: red;
}
for more information: http://www.w3schools.com/cssref/sel_active.asp