I have modal which is shown after some seconds of page load.
The content of modal is the facebook page
Visit here to see the modal. (Wait for 3-4 secs)
I want that modal to be auto zoomed, as per screen
My Modal CSS:-
<style type="text/css">
.fb_self{
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
outline: 0;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
padding: 5px;
}
.fbhide{
display:none;
}
.fbshow{
position: fixed;
color: #000000;
background-color: #ffffff;
/* To align popup window at the center of screen*/
top: 75;
left: 50%;
margin-left: -170px;
}
</style>
My Modal HTML:
<div id="fbmy_div" class="fbhide">
<div class="fbmy_div">
<div class="fb_self">
<div class="fb-page" data-href="https://www.facebook.com/baidtransports/" data-tabs="timeline,messages" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" >
<blockquote cite="https://www.facebook.com/baidtransports/" class="fb-xfbml-parse-ignore">
Baid Transport Company
</blockquote></div>
</br></br><center>
<span class="btn btn-primary btn-xl page-scroll" onclick="fbfunccl()">Close</span></center>.
</div></div></div>
I want that Facebook modal to be auto zoomed and fit the screen.
I have a custom button next to a input which is not acting as intended. Basically its creating a overlapping border with the darker hint when i use rgba. The shadow it adds seems to occur in the latest version of BS and not 3.0.0.
HTML
<div class="row">
<div class="col-lg-12 newsletter">
<form method="post" action='/' class="form" id="newsletter-form">
<div class="form-group" id="newsletter-form-group">
<div class="controls">
<div class="input-group">
<input type="text" class="form-control newsletter-input" name="testInput" placeholder="Your email address here.." />
<span class="input-group-btn">
<button class="btn btn-default newsletter-btn" type="submit">Sign up</button>
</span>
</div>
</div>
<label class="control-label newsletter-status" for="testInput"></label>
</div>
</form>
</div>
</div>
CSS
/* Latest compiled and minified CSS included as External Resource*/
body {
margin: 10px;
background-color:#404040;
}
.btn:focus, .btn:active, .btn.active {
outline: 0!important;
}
.newsletter-btn, .newsletter-btn:focus, .newsletter-btn:active, .newsletter-btn.active {
color:#fff;
background-color: rgba(52, 152, 219, 1.0) !important;
border: 1px solid rgba(52, 152, 219, 1.0) !important;
font-weight:500;
border-radius:0!important;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.newsletter-btn:hover {
background-color: rgba(52, 152, 219, 0.5) !important;
border: 1px solid rgba(52, 152, 219, 0.5) !important;
color:#fff!important;
box-shadow: none!important;
-webkit-box-shadow: none!important;
-moz-box-shadow: none!important;
}
.newsletter input {
box-shadow:none!important;
border-color:#fff!important;
background-color: #fff;
color:#fff;
border-radius:0!important;
}
DEMO: https://jsfiddle.net/DTcHh/7138/
To fix the different border color, set the border color to transparent on hover--you are overlapping two elements with 0.5 opacity, which give the look of a lighter border.
.newsletter-btn:hover {
background-color: rgba(52, 152, 219, 0.5) !important;
border: 1px solid transparent !important;
color:#fff!important;
box-shadow: none!important;
-webkit-box-shadow: none!important;
-moz-box-shadow: none!important;
}
To fix the funny growing thing, set the z-index of the button:
.newsletter-btn{
z-index:999;
}
See this functioning fiddle
Can someone please provide help with my script & teach me why my content panels don't switch with the added script to add the 'selectedTab' class? They switch fine when I remove the script altogether. I tried removing the 'active' class from Home which obviously didn't work. Sorry I'm so clueless. thanks in advance for your help.
<style>
/*Selected Tab*/
.selectedTab {
background-color:#CBD8E1;;
border-left: 1px solid rgb(69, 145, 193);
border-top: 1px solid rgb(69, 145, 193);
border-right: 1px solid rgb(69, 145, 193);
border-bottom: nonet;
color: rgb(69, 145, 193);
line-height: 0.5em;
padding: 8px 10px;
}
/*Non-Selected Tab*/
.notSelectedTab {
border: 1px solid rgb(69, 145, 193);
border-bottom: none;
background-color: rgb(69, 145, 193);
color: rgb(255, 255, 255);
line-height: 0.5em;
margin-top: -1px;
padding: 8px 10px;
}
</style>
<script>
$( document ).ready( function() {
$('ul.nav li a').click(
function(e) {
e.preventDefault(); // prevent the default action
e.stopPropagation(); // stop the click from bubbling
$('.selectedTab').removeClass('selectedTab').addClass('notSelectedTab');
$(this).addClass('selectedTab').removeClass('notSelectedTab');
});
});</script>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li><a class="selectedTab" href="#home" role="tab" data-toggle="tab">Home</a></li>
<li><a class="notSelectedTab" href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li><a class="notSelectedTab" href="#messages" role="tab" data-toggle="tab">Messages</a></li>
<li><a class="notSelectedTab" href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">Home</div>
<div class="tab-pane" id="profile">Profile</div>
<div class="tab-pane" id="messages">Messages</div>
<div class="tab-pane" id="settings">Settings</div>
</div>
Stumped to find out the layout for this page is wrong in both IE and Firefox, with completely (as far I know) neutral code.
In IE the box containing this next is far too huge for it.
In Mozilla it is too small.
Mozilla shows box shadows when I use the property:
box-shadow
Which is very strange, I thought it used -moz-box-shadow
Here's what's going on: http://i.imgur.com/SvPAP.png (that line on the Mozilla box is from photoshop).
Here's all associated code:
HTML:
<!DOCTYPE hmtl>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen, projection" href="page.css"/>
<link rel="stylesheet" type="text/css" media="screen, projection" href="text.css"/>
<link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Arvo' />
<link rel="stylesheet" href='http://fonts.googleapis.com/css?family=PT+Sans' />
<head>
<body>
<div class="divCentre">
<div class="divTitleCon">
<p class="titleText">What Is This?</p>
</div>
<div class="divContentCon">
<p class="contentText">
TEXT
<br /><br />
TEXT
<br /><br />
TEXT
<br /><br />
<span class="footerText">
TEXT
</span>
</p>
</div>
</div>
</body>
</html>
CSS PAGE:
html, body
{
margin: 0;
padding: 0;
}
body
{
background-color: rgb(241, 250, 253);
}
.divCentre
{
position:absolute;
top: -25%;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 380px;
height: 230px;
padding: 20px;
overflow: hidden;
border: 1px solid rgba(200, 200, 200, 1); /* BORDER */
background-color: rgba(255, 255, 255, 1); /* BACKGROUND */
color: rgb(100, 100, 100);
-moz-box-shadow:
0px 0px 5px rgba(130, 130, 130, 0.2), /* OUTER SHADOW */
inset 0px 0px 5px rgba(0, 0, 0, 0.05); /* INNER SHADOW */
-webkit-box-shadow:
0px 0px 5px rgba(130, 130, 130, 0.2), /* OUTER SHADOW */
inset 0px 0px 5px rgba(0, 0, 0, 0.05); /* INNER SHADOW */
}
.divTitleCon
{
position: relative;
width: 100%;
height: 15%;
}
.divContentCon
{
position: relative;
margin-top: 20px;
width: 100%;
height: auto;
max-height: 80%;
word-wrap: break-word;
overflow: hidden;
}
CSS TEXT:
p
{
margin: 0;
padding: 0;
}
.titleText
{
font: 32px Arvo;
text-shadow: 0px 1px rgb(255,255,255);
}
.contentText
{
font: 14px PT Sans;
color: rgb(150, 150, 150);
text-shadow: 0px 1px rgb(255,255,255);
}
.footerText
{
color: rgb(200, 200, 200);
}
It appears that Mozzila and Chrome render text completely differently (the text in question here is from Google's font API, maybe a more local version wouldn't have this issue. I'll experiment).
Anyway, specifying the line-height and using a common font is important.
Specifying just line-height will fix the gap between lines, spaced by <br /><br />, however, the amount of text on that line will vary.
Firefox tended to squash it together more, while Google rendered it 'correctly', which is understandable. The fonts from Google's API are probably optimised for -webkit-, or their fork of it.
Either way this is annoying but a required workaround.
TL;DR:
Fixed by changing:
font: 14px PT Sans;
to
font: 14px Arial, Sans-Serif;
line-height: 14px;
I have this button image:
I was wondering whether it would be possible to make a simple
some words
and style that link to appear as that button?
If it is possible, how do I do that?
Using CSS:
.button {
display: block;
width: 115px;
height: 25px;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
font-weight: bold;
line-height: 25px;
}
<a class="button">Add Problem</a>
http://jsfiddle.net/GCwQu/
Check Bootstrap's docs. A class .btn exists and works with the a tag, but you need to add a specific .btn-* class with the .btn class.
eg: <a class="btn btn-info"></a>
you can easily wrap a button with a link like so <button>my button </button>
Something like this would resemble a button:
a.LinkButton {
border-style: solid;
border-width : 1px 1px 1px 1px;
text-decoration : none;
padding : 4px;
border-color : #000000
}
See http://jsfiddle.net/r7v5c/1/ for an example.
Try this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Button Tags</h2>
Link Button
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
</div>
You can use the a href tag line from there.
Button Text
If you'd like to avoid hard-coding a specific design with css, but rather rely on the browser's default button, you can use the following css.
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
}
Notice that it probably won't work on IE.
None of other answers shows the code where the link button changes its appearance on hover.
This is what I've done to fix that:
HTML:
My button
CSS:
.link_button2 {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #1A4575;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
background: #3A68A1;
color: #fee1cc;
text-decoration: none;
padding: 8px 12px;
text-decoration: none;
font-size: larger;
}
a.link_button2:hover {
text-decoration: underline;
background: #4479BA;
border: solid 1px #20538D;
/* optional different shadow on hover
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
*/
}
JSFiddle:
https://jsfiddle.net/adamovic/ovu3k0cj/
You have got two options for consistency.
Use framework-specific tags, and use them throughout the website.
Use JavaScript to emulate a link on a button element, and then have the button consistent with browser's buttons look. Those css button-look hacks will never be accurate.
.
<button onclick="location.href = 'Homepage.html'; return false;">My Button</button>
return false; is to prevent the default behavior of the button being clicked.
Use the background-image CSS property on the <a> tag
Set display:block and adjust width and height in CSS
This should do the trick.
Yes you can do that.
Here is an example:
a{
background:IMAGE-URL;
display:block;
height:IMAGE-HEIGHT;
width:IMAGE-WIDTH;
}
Of course you can modify the above example to your need. The important thing is to make it appear as a block (display:block) or an inline block (display:inline-block).
For basic HTML, you can just add an img tag with the src set to your image URL inside the HREF (A)
<img src="http://problemio.com/img/ui/add_problem.png" />
You can create a class for the anchor elements that you would like to display as buttons.
Eg:
Using an image :
.button {
display:block;
background: url('image');
width: same as image
height: same as image
}
or using a pure CSS approach:
.button {
background:#E3E3E3;
border: 1px solid #BBBBBB;
border-radius: 3px 3px 3px 3px;
}
Always remember to hide the text with something like:
text-indent: -9999em;
An excellent gallery of pure CSS buttons is here
and you can even use the css3 button generator
Plenty of styles and choices are here
good luck
Just take regular css button designs, and apply that CSS to a link (in exactly the same way as you would to a button).
Example:
Some words
<style type="text/css">
.stylish-button {
-webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
-moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
color:#333;
background-color:#FA2;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:none;
font-size:16px;
font-weight:700;
padding:4px 16px;
text-shadow:#FE6 0 1px 0
}
</style>
Like so many others, but with explanation in the css.
/* select all <a> elements with class "button" */
a.button {
/* use inline-block because it respects padding */
display: inline-block;
/* padding creates clickable area around text (top/bottom, left/right) */
padding: 1em 3em;
/* round corners */
border-radius: 5px;
/* remove underline */
text-decoration: none;
/* set colors */
color: white;
background-color: #4E9CAF;
}
<a class="button" href="#">Add a problem</a>
Tested with Chromium 40 and Firefox 36
<a href="url" style="text-decoration:none">
<input type="button" value="click me!"/>
</a>
for those having problems after adding active and focus
give a class or id name to your button and add this to css
for example
//html code
<button id="aboutus">ABOUT US</button>
//css code
#aboutus{background-color: white;border:none;outline-style: none;}
Try this code:
<code>
<a href="#" class="button" > HOME </a>
<style type="text/css">
.button { background-color: #00CCFF; padding: 8px 16px; display: inline-block; text-decoration: none; color: #FFFFFF border-radius: 3px;}
.button:hover { background-color: #0066FF; }
</style>
</code>
Watch this (It will explain how to do it) - https://youtu.be/euti4HAJJfk
A simple as that :
link
Just add "class="btn btn-success" & role=button