I have about 100 buttons in my website, all using JavaScript onclick method. I want to replace them all with regular <a href> links for SEO purposes.
I made new class called button_seo with the same CSS as the old buttons. I placed it in the global CSS file, but it will not work and my buttons have no styling.
It does works when I place the CSS in the same file where the button is, but I would like to place it in the global file so I can control many buttons at once.
What might cause this? I don't have any style for the button_seo class anywhere in the files, just in global CSS file.
Here is my code:
.button_seo {
height: 40px ;
background: linear-gradient(to bottom, #4eb5e5 0%, #389ed5 100%); /* W3C */
border: none;
border-radius: 5px;
position: relative;
border-bottom: 4px solid #2b8bc6;
color: #fbfbfb;
font-weight: 600;
font-family: "Open Sans", sans-serif;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
font-size: 15px;
text-align: center;
text-indent: 5px;
box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.2);
cursor: pointer;
width: 190px;
left: 100px;
}
<a class="button_seo" style="left:30px;" href='../censord' title='censord'>Click >></a>
As comment to your answer, is this what you want?
.button_seo {
display: inline-block;
line-height: 40px; /* same as height */
height: 40px ;
background: linear-gradient(to bottom, #4eb5e5 0%, #389ed5 100%); /* W3C */
border: none;
border-radius: 5px;
position: relative;
border-bottom: 4px solid #2b8bc6;
color: #fbfbfb;
font-weight: 600;
font-family: "Open Sans", sans-serif;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
font-size: 15px;
text-align: center;
text-indent: 5px;
box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.2);
cursor: pointer;
width: 190px;
left: 100px;
}
<a class="button_seo" style="left:30px;" href='../censord' title='censord'>Click >></a>
EDIT - I found this SO
i fixed it, can't use height and width parameters for link, that not button after all.
Related
I'm trying to create a button like this:
This needs to be done in pure css.
I tried to do, nothing happened, it does not work correctly:
display: inline-block;
width: 165px;
text-align: center;
color: #fff;
background: linear-gradient(180deg, #4b3529 21%, #4c2e1a 100%);
border-radius: 5px;
border: 1px solid #ffffff;
font-family: Arial;
font-weight: normal;
border-left: 2px solid #e5ccaf;
border-image: linear-gradient(to bottom, #ffd400,rgba(0, 0, 0, 0)) 0 100%;
border-top: 1px solid #ffd400;
How can I do that?!
You can add the CSS properties inside a class. Then add the class to an HTML element with text-decoration: none; property as follows:
.pure_css_button {
display: inline-block;
width: 165px;
text-align: center;
color: #fff;
text-decoration: none;
background: linear-gradient(180deg, #4b3529 21%, #4c2e1a 100%);
border-radius: 5px;
border: 1px solid #ffffff;
font-family: Arial;
font-weight: normal;
border-left: 2px solid #e5ccaf;
border-image: linear-gradient(to bottom, #ffd400, rgba(0, 0, 0, 0)) 0 100%;
border-top: 1px solid #ffd400;
}
<a href="#" class="pure_css_button">
Button</a>
button {
cursor: pointer;
font-size: x-large;
padding: 0.6rem 2rem;
font-weight: bold;
overflow: hidden;
color: #fff;
background: linear-gradient(180deg, #4b3529 21%, #4c2e1a 100%);
border:0;
border-radius: .3rem;
position: relative;
border-top: 2px solid hsl(24, 49%, 15%);
border-bottom: 2px solid hsl(24, 49%, 15%);
}
button::after,button::before{
content: '';
height: 100%;
width: .15rem;
position: absolute;
top:0;
background:linear-gradient(to bottom, #ffd400, rgba(0, 0, 0, 0)) ;
}
button::before{
left: 0;
}
button::after{
right: 0;
}
<button>
Pure Css</button>
it's possible using body::after content "text" and style it
I have created an animated rotated button and I would like it to have a shadow that is paralel to the x-axis. Now the shadow is not, do You have an idea how to make it? Thank You. This is the css of the existing button and the link to the codepan with "the live example".
.btnMail{
border-radius: 4px;
background-color: rgba(120, 0, 255, 0.8);
border: none;
color: white;
padding: 12px 16px;
font-size: 30px;
cursor: pointer;
transform: rotate(-10deg);
transform-origin: bottom left;
box-shadow: 0 8px 6px -6px black;
}
https://codepen.io/hubkubas/pen/dmJjWB
Based on the understanding of your question, you can achieve fancy 3D looking shadows or custom depth shadows by applying shadow-box property to pseudo elements which you can then further manipulate, to get the desired shadows.
Here is a quick-fix that probably shows the type of shadow you want:
/* btn */
.btnMail{
width: 65px;
height: 60px;
display: inline-block;
border-radius: 4px;
background-color: rgba(120, 0, 255, 0.8);
border: none;
color: white;
padding: 12px 16px;
font-size: 30px;
cursor: pointer;
transform: rotate(-10deg);
transform-origin: bottom left;
}
.btnMail:hover {
transition: 0.30s;
transform: rotate(0deg);
box-shadow: 0px 8px 6px -6px black;
background-color: rgba(255, 0, 54, 0.8);
}
.btnMail:active {
box-shadow: 0 6px 6px -6px black;
transition: 0.30s;
}
#shadow{
z-index: -111;
width: 65px;
height: 50px;
position: absolute;
top: 17px;
left: 5px;
box-shadow: 0px 10px 16px -9px black;
}
<button class="btnMail shadow"><i class="fa fa-envelope"></i></button>
<div id="shadow">
</div>
(Note: I have used a seperate div tag for the shadow, since the animation you apply on the button will also be applied on the shadow).
You can learn more about how to create custom shadows on this link.
I have a custom style input range and I want to have height 0 to support my style -> the idea is to not have any in built style so I can make my slider appear according to a separate span element styles included on top, so for the span element to be visible, my input range custom styles should not be visible at all.
While my idea worked like a charm it is preventing click from working on safari and chrome - on firefox the click still works properly, with height 0.
Is there a way to tweak my input range style such that I can achieve this? Please find my input range styles below:
Css
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 6.8px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 0px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
box-shadow: transparent;
background: rgba(0, 0, 0, 0);
border-radius: 0px;
border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 20px;
border-radius: 20px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -8.8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
// background: rgba(13, 13, 13, 0);
background: rgba(0, 0, 0, 0);
}
Html
<input id="scrollbar" class="scrollbar" type="range" min=1 max=24 step="0.01" />
okay I solved the problem! We can provide background transparent. That made the slider clickable!
I found an excellent article on this topic.
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 6.8px 0;
background: transparent;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
box-shadow: transparent;
border-radius: 0px;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 20px;
border-radius: 20px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -8.8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: transparent;
}
<input id="scrubber" class="scrollbar" type="range" min=1 max=24 step="0.01" />
** Please run on chrome and safari to test:D
I hope this post helps someone.
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 am trying to have a image on CSS text button. If I increase font-size to 26 px, image appear properly.I want to keep the font-size at 20px but fit image properly.
a.button {
border: 1px solid #979797;
}
a.button.icon {
padding-left: 11px;
}
a.button.icon span{
padding-left: 48px;
background: url(../img/gmail2.png) no-repeat;
}
a.button.icon.chat span {
background-position: 0px -48;
}
a.button {
background-image: -moz-linear-gradient(top, #ffffff, #dbdbdb);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #ffffff),color-stop(1, #dbdbdb));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#dbdbdb');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#dbdbdb')";
border: 1px solid #fff;
-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
padding: 5px 5px;
text-decoration: none;
text-shadow: #fff 0 1px 0;
float: left;
margin-right: 15px;
margin-bottom: 15px;
display: block;
color: #597390;
line-height: 38px;
font-size: 20px;
font-weight: bold;
}
What about setting an specific height for a.button.icon span ?