Trouble Styling Button in wordpress - html

I'd think this would be easy, so I am sure I am missing something simple.
I have a button I am trying to style on my website.
Here is the css used to style it.
button.popmake-contact-us {
display: inline-block;
height: 50px;
line-height: 50px;
padding-right: 30px;
padding-left: 30px;
position: relative;
font-family: 'Special Elite', 'Inconsolata', 'Droid Sans', serif!important;
font-size: 20px;
background-color: rgb(247, 210, 104);
color: rgb(255,255,255);
text-decoration: none;
text-transform: uppercase;
border-color: #EDE5B1;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";
zoom: 1;
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
box-shadow: -2px -2px 0px rgba(95, 91, 77, 0.13);
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true);}
.contact_popup_button {position: fixed;bottom: 0px;right: 0px;z-index: 9999;}
And this is the HTML for the button.
<footer>
<!--copyright info-->
<p class="footer-copyright">© Copyright 2015 | Sporting Life Bar . All Rights Reserved. </p>
<!--Form Submission Button-->
<div class="contact_popup_button" style="cursor: pointer;"><button class="popmake-contact-us" style="cursor: pointer;">Contact Us</button></div>
I can practice styling it within Chromes Inspeciton tools, but once I add it to the style.css file in the child theme..it goes back to the default style. I can't figure out WHY it is doing this!
The website in question I've got live on the staging site if you want to take a look at that. http://staging.sportinglifebar.com/
The button is kept at the very bottom right of the website. Praying someone can help point me in the correct direction!
If it is helpful, I am using the wordpress plugin "Popup Maker" to style the form and create to pop up. You have to define a class for the button to activate the popup.

You have a mistake in your selector
.popmake-contact-us input[type="button"] {
font-family: helvetica;
color: #666666;
font-size: 12px;
border:3px solid;
border-color: #000;
}
will look an input with type= button with a parent class of popmake-contact-us
So what you want is a button with a class
button.popmake-contact-us{ ..style..}

Related

Css content inside shape

Hi am trying to do the below design how can i add the below shape and add a content to it?
I have looked for a solution in the internet but cant find one.
Please see my code below
.q{
background: #f5f5f5;
padding: 20px;
border-radius: 30px;
moz-border-radius: 30px;
webkit-border-radius: 30px;
margin-bottom: 5px;
cursor: pointer;
}
.q:hover{
font-size: 25px;
box-shadow: 10px 5px 24px -6px rgb(84 172 235 / 72%);
-webkit-box-shadow: 10px 5px 24px -6px rgb(84 172 235 / 72%);
-moz-box-shadow: 10px 5px 24px -6px rgba(84,172,235,0.72);
background: #3c98cb;
color: #ffffff;
}
.blue{
}
.contentp {
display: none;
}
.q:hover .contentp {
display: block;
}
<div class="q">
<div class="blue">
Is it simple and easy to use?
</div>
<div class="contentp">
Webex is designed with a clean User Interface and emphasis on simplicity, based on how users collaborate today. It is optimised for high-quality video and audio, for a smooth, fast experience.
</div>
</div>

Button pushing content down on hover

I'm working on a website and I have run into a little problem I can't really solve. Basically, I have a credits button that is supposed to have some effects when the user hovers over it. However, if I hover over the button it's pushing down all the contents on the page.
I have tried to solve it quite a bit but sadly I couldn't find a solution. I'm sure I could find a solution sooner or later but I'm on a schedule and have to get some other things on the page done, so I will need to focus on that.
.creditsbtn {
font-family: 'Courier New', Courier, monospace;
color: #333;
background: #AB5DFC;
border-radius: 10px;
border: #AB5DFC;
padding-top: 5px;
padding-bottom: 7px;
padding-right: 10px;
padding-left: 10px;
font-size: 20px;
}
.creditsbtn:hover {
transform: translateY(-5px);
color: #333;
box-shadow: .0rem .2rem .4rem #777;
border: 5px solid #b16afd;
pointer-events: visible;
position: relative;
z-index: 0;
visibility: visible;
float: none;
}
<h2>header 1</h2>
<p style="text-align: center">some text<br><br>
<button class="creditsbtn">button</button></p>
<br><hr>
<h2>header 2</h2>
<p style="text-align: center">some more text<br><br></p>
Try doing as below (I added comments in my code). The trick is to have that border from the beginning but with a transparent colour, and just change the colour on hover.
.creditsbtn {
font-family: 'Courier New', Courier, monospace;
color: #333;
background: #AB5DFC;
border-radius: 10px;
/* line I added */
border: 5px solid transparent;
padding-top: 5px;
padding-bottom: 7px;
padding-right: 10px;
padding-left: 10px;
font-size: 20px;
}
.creditsbtn:hover {
transform: translateY(-5px);
color: #333;
box-shadow: .0rem .2rem .4rem #777;
/* line I added */
border-color:#b16afd;
pointer-events: visible;
position: relative;
z-index: 0;
visibility: visible;
float: none;
}
<h2>header 1</h2>
<p style="text-align: center">some text<br><br>
<button class="creditsbtn">button</button></p>
<br><hr>
<h2>header 2</h2>
<p style="text-align: center">some more text<br><br></p>
The animation change a little bit from what you have, but this way you can avoid that pushing problem you have.
Instead of having a border which is pushing the other content down. You could have a solid box-shadow the same colour as the button. This would enlarge the box on-hover without affecting other content. Then add a second box-shadow for the shadowing effect.
box-shadow: 0px 0px 0px 10px #color, 0px 8px 8px #000;
/* before the comma is your enlarged border but set your color.
After the comma is an actual shadow currently set to black*/

input field unnecessary property is taking in IOS device

we are developing hybrid mobile application using dojo 1.10.3 .
all devices text field is coming UI is good except iPhone environment text field inside top portion unwanted property(black color border and shadow) coming that is not looking good.
In that input field we are not able to find it what is that exactly property
we are taking some input fields and adding css properties like below
.textbox{
margin: 0px auto 0px auto;
font-size: 12px;
font-weight: bold;
text-indent: 10px;
color: rgba(23, 82, 117, 1.0);
display: block;
width: 85%;
height: 34px;
border: 1px solid rgba(204, 204, 204, 1.0);
border-radius: 0px;
background-color: white !important;
outline: none !important;
-webkit-box-shadow: inset 0px 0px 0px 0px transparent;
-moz-box-shadow: inset 0px 0px 0px 0px transparent;
box-shadow: inset 0px 0px 0px 0px transparent;
}
<input data-dojo-type="dojox.mobile.TextBox" class="textbox">
<input data-dojo-type="dojox.mobile.TextBox" class="textbox">
<input data-dojo-type="dojox.mobile.TextBox" class="textbox">
and textfeild default css code in iphone.css like below
.mblTextBox {
height: 22px;
border-width: 1px;
border-style: inset;
font-family: Helvetica;
font-size: 13px;
border-color: #9cacc0;
border-radius: 5px;
}
i am attaching screen shots Please find my problem easily understand
we want like this
enter image description here
actual problem below like this
enter image description here
Try adding: -webkit-appearance: none; to all input elements in CSS.
The input below should appear the same on all browsers (including mobile Safari)
input[type=text] {
-webkit-appearance: none;
border: 1px solid black;
border-radius: 0px;
outline: none;
width: 200px;
margin: 0px;
padding: 4px;
}
<input type="text" />
Edit:
It seems that you're problem could also be solved via this way: https://davidwalsh.name/input-shadows-ipad
Edit 2:
I've tried the example below multiple times and it should definitely work. If not, you're using some CSS rules that might override one (or more) of the rules from the example.
Result on iPhone Simulator:
ul.examples {
list-style: none;
padding: 0px;
font-family: Arial;
}
.textbox {
margin: 5px 0px 10px 0px;
display: block;
width: 100%;
border: 1px solid rgba(204, 204, 204, 1.0);
border-radius: 0px;
outline: none !important;
}
.example:last-child .textbox {
-webkit-appearance: none;
color: red;
}
<ul class="examples">
<li class="example">Your example:
<br/>
<input data-dojo-type="dojox.mobile.TextBox" class="textbox">
</li>
<li class="example">My example:
<br/>
<input data-dojo-type="dojox.mobile.TextBox" class="textbox">
</li>
</ul>

HTML Email button link not working

I am trying to create a button in an HTML email that goes to a link in a href tag. I have practically no understanding of html code to be honest. This is what I'm trying:
<p>
<input style="width: 200px; padding: 15px; box-shadow: 6px 6px 5px;
font-weight: MEDIUM; background: #3ebfac; color: #000000;
cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9;
font-size: 110%;" onclick="window.location= a href=[SURVEYURL]"
type="submit" value="START NOW" />
</p>
The link doesn't seem to work...
Please let me know if you can help?
Thanks.
Alex.
You will never get JavaScript to run in an email for obvious security reasons.
Also no need to use a submit button which will attempt to submit a non-existing form.
This will work better - the anchor is allowed in emails
<p>
<a href="[SURVEYURL]" style="text-decoration:none;
width: 200px; padding: 15px; box-shadow: 6px 6px 5px;
font-weight: MEDIUM; background: #3ebfac; color: #000000;
cursor: pointer; border-radius: 10px; border: 1px solid #D9D9D9;
font-size: 110%;">START NOW</a>
</p>

adding text to images for navigation bar

I have a navigation bar but want to add images to it, so that rather than text links, the nav bar is made up of buttons consisting of an image and text which have a hover effect etc.
But as some of the link names are dynamic I can't make the buttons in photoshop so was wondering how to make this type of nav bar in just html and css.
Any ideas?
EDIT
To clarify i have the following image sample nav button
and want to add text beneath this to form the buttons on the nav bar if that makes it clearer.
You can do a lot just with CSS
The basic idea is to change attributes of each state of the button using pseudo classes .cssclass:hover to mouse over state and .cssclass:active to mouse down.
normal
/* style of the button in normal state */
button.css3button{
padding: 0.5em;
background-color: lightblue;
border: 4px outset green;
color: green;
border-radius: 4px;
}
:hover
/* properties that change when mouse over */
button.css3button:hover {
background-color: lightgreen;
}
:active
/* properties that change when mouse down */
button.css3button:active {
color: yellow;
border: 4px inset red;
}
Live Demo: JSFIDDLE
more complex styling examples with CSS3:
<button type="button" name="" value="" class="css3button">submit</button>
button.css3button {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#bfc2ff 0%,
#82b4ff 25%,
#4664fa);
background: -webkit-gradient(
linear, left top, left bottom,
from(#bfc2ff),
color-stop(0.25, #82b4ff),
to(#4664fa));
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 3px solid #ffffff;
-moz-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(49,141,212,1);
-webkit-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(49,141,212,1);
box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(49,141,212,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
}
Demo: JSFIDDLE
you can of course change sizes, colors, gradients for each state :hover :active :visited on your own taste, you can style almost anything <a> <span> <div> <button>
This question isn't really suited for this forum. It is for specific problems, not basic tutorials. There are plenty of good tutorials out there you can find by doing a simple google search that walk you through basic CSS and how to achieve this.
But just to get you started, you could do something like this: http://jsfiddle.net/wgBTZ/
HTML:
<ul>
<li><a href="#" >One</a></li>
<li><a href="#" >Two</a></li>
<li><a href="#" >Three</a></li>
<li><a href="#" >Four</a></li>
</ul>
CSS:
li {
float:left;
width: 100px;
height: 40px;
background:#CCC;
margin:0 0 0 15px;
}
a {
color: black;
text-decoration:none;
float:left;
width: 100px;
height: 40px;
background:#CCC;
}
a:hover {
background:#000;
color:white
}
Edit: This is just the basic mechanics. With CSS3 you can take what I've done above and actually build some pretty cool stuff.