Here is how it looks from my source files
And here is how it looks from where it is hosted
Obviously alot wrong with it but the one thing I'm most worried about is that border around the blue button.
Here's the HTML code for each button.
Blue Button
View The Line Up</button>
Grey Button
View The Line Up!</button>
and the CSS.
Blue Button
.btn {
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 14px;
background: #358cb1;
padding: 10px 30px 10px 30px;
text-decoration: none;
float: left;
margin-top: 20px;
}
.btn:hover {
background: #3cb0fd;
text-decoration: none;
}
Grey Button
.btn2 {
-webkit-border-radius: 31;
-moz-border-radius: 31;
border-radius: 31px;
font-family: Arial;
color: #000000;
font-size: 14px;
padding: 10px 30px 10px 30px;
border: solid #000000 1px;
text-decoration: none;
float: left;
margin-top: 20px;
margin-left: 20px;
}
.btn2:hover {
background: #acb0b3;
text-decoration: none;
}
If you want a solid, single-colour border, then:
border-style: solid;
It looks like it's set to something like inset or outset which are meant to create a quasi-3D effect, Windows 98-style.
If you don't want any border at all, then:
border: 0;
I'm not sure what do you want exactly but why are you wrapping an <a> tag around a <button> ? try this as in this JS Fiddle
View The Line Up
View The Line Up!
border:none; will get rid of the border.
As an aside, having a button inside of a link sounds redundant. Why not style the link instead (and apply display:inline-block;)?
My button text
Related
As I said, depending on what browser I'm using, the button varies for some reason.
Here's the code I'm using right now-
HTML-
<input type="button" id="submitButton" onclick="generateLink()" value="Go" />
CSS-
#submitButton {
display: block;
color: white;
background-color: #8373e6;
font-size: 26px;
font-family: "Raleway", sans-serif;
font-weight: 400;
outline: none;
border: 3px solid #8373e6;
padding: 5px 15px;
margin: 20px;
border-radius: 30px;
box-shadow: 0 0 20px #9c9c9c67;
width: min-content;
cursor: pointer;
}
#submitButton:hover {
background-color: #6b5ebd;
}
#submitButton:active {
background-color: #554a97;
}
Whenever I look this up on the live server on my Windows PC (on both Firefox and Chrome), it looks the way I want it to. But when I deploy the test site on Firebase and check it out on my mobile phone (iPhone with Safari Browser), The text "Go" is gone and all I can see is a flat, text-less button.
I have also tried changing the <input> tag to a <button> tag, adding a display: block; and a bunch of other stuff but it doesnt seem to work.
Any idea why this could be happening?
Please and thanks.
Have you tried using anchor element ?
Go
a{
display: block;
color: white;
background-color: #8373e6;
font-size: 26px;
font-family: "Raleway", sans-serif;
font-weight: 400;
outline: none;
border: 3px solid #8373e6;
padding: 5px 15px;
margin: 20px;
border-radius: 30px;
box-shadow: 0 0 20px #9c9c9c67;
width: min-content;
text-decoration:none;
}
a:hover {
background-color: #6b5ebd;
cursor:pointer;
}
a:active {
background-color: #554a97;
}
Please have a view at this image:
As from the image you can see that I have entered text in the input box but as I also have a button placed in that box so the text is getting hidden below the box.
Is there any way to prevent that, the button should also be on that place and the text should not hide instead it shoud be focused if further text is being typed.
Html code is:
<div class="form">
<input type="text" placeholder="Subscribe & Get Notified" id="email_inp">
<button style="outline: none;" class="btn-1 span btn-4 btn-4a icon-arrow-right" id="email_btn"><span></span></button>
</div>
The css code is:
#media only screen and (max-width: 768px)
{
input[type="text"]
{
font-family: "titillium_webregular", Arial, sans-serif;
border: none;
-webkit-border-radius: 3px 33px 33px 3px;
border-radius: 10px 33px 33px 10px;
color: rgba(85, 85, 85, 0.85);
font-size: 1.1em;
display: inline;
padding: 19.7px 13px;
background: #f5f5f5;
outline: none;
width: 93%;
box-shadow: 0px 11px 34px #111;
vertical-align: middle;
}
.btn-1
{
cursor: pointer;
padding: 29px 29px;
display: inline-block;
position: relative;
vertical-align: middle;
margin-left: -67px;
text-indent: -9999px;
margin-top: 1px;
outline: none;
width: 20px;
height: 14px;
border:none;
}
}
Any helps appreciated. Thanks in advance.
Try this.. You can see a space right to the textbox. I have added padding right to the textbox
$(function(){
$('#tbcss').val('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
});
#tbcss
{
padding-right: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" id="tbcss"/>
In my opinion, you should use your styling in a bit different way and use .form CSS selector too. You can use flexbox for example:
.form {
// NEW:
display: flex;
justify-content: space-between;
// Your old input CSS:
-webkit-border-radius: 3px 33px 33px 3px;
border-radius: 10px 33px 33px 10px;
background: #f5f5f5;
box-shadow: 0px 11px 34px #111;
width: 93%;
}
input[type="text"] {
// NEW:
width: 100%;
// Your old without unnecessary CSS:
font-family: "titillium_webregular", Arial, sans-serif;
color: rgba(85, 85, 85, 0.85);
border: none;
font-size: 1.1em;
padding: 19.7px 13px;
outline: none;
vertical-align: middle;
}
.btn-1 {
// NEW
align-self: flex-end;
// Your old without unnecessary CSS:
cursor: pointer;
padding: 29px 29px;
text-indent: -9999px;
margin-top: 1px;
outline: none;
width: 20px;
height: 14px;
border:none;
}
Add webkit CSS properties in case you need support in older browsers.
If you wish to prevent the image from hiding the text, then all you need to do is increase the padding-right property on the input textfield.
Maybe try a value of 40px or even more until you're satisfied with the result, then the caret should never go below the button.
Just add this:
input[type="text"]
{
padding-right:5%;
}
In this case all u need to do is add "padding-right: 50 px;" to the input text box class(50 is just a number u can increase or decrease that according to your need)
I have a .button class which on the active state adds an inset box shadow and increases the line-height by 2 to give a button press effect. But the button adjacent to it and the text below it also move down which I do not want. Could you please tell me how can I achieve this effect without the anything else moving?
Note: I only want the text inside the button to move down by 2px on button press and hence I chose using the line-height.
.button{
display: inline-block;
height: 36px;
padding: 0 18px;
background: cyan;
color: black;
border: none;
line-height: 36px;
margin: 6px;
}
.button:active, .button:focus{
outline: none;
}
.button:active{
box-shadow: 0 2px 0 0 blue inset;
line-height: 38px;
}
<button class="button">Hello!</button>
<button class="button">Bye!</button>
<div>Hello!</div>
Just add vertical-align: top; to your .button styles.
Default value of vertical-align property is base-line. When one button is focused, because of change in its line-height, alignment of .button elements gets disturbed and as a result it push down the below content.
.button{
display: inline-block;
vertical-align: top;
height: 36px;
padding: 0 18px;
background: cyan;
color: black;
border: none;
line-height: 36px;
margin: 6px;
}
.button:active, .button:focus{
outline: none;
}
.button:active{
box-shadow: 0 2px 0 0 blue inset;
line-height: 38px;
}
<button class="button">Hello!</button>
<button class="button">Bye!</button>
<div>Hello!</div>
I would suggest making the line height 38px and adding transparent box shadow (of the same height) when button is not active. This way in active state nothing will be moved.
You can try this with a transformation:
.button{
display: inline-block;
height: 36px;
padding: 0 18px;
background: cyan;
color: black;
border: none;
line-height: 36px;
margin: 6px;
}
.button:active, .button:focus{
outline: none;
}
.button:active{
box-shadow: 0 2px 0 0 blue inset;
transform:translateY(2px);
}
<button class="button">Hello!</button>
<button class="button">Bye!</button>
<div>Hello!</div>
Below is my problem, these are the same link and the orange background is a hover effect set in css. As you can see when the window is compressed the text of the link moves onto the next lines to fit the screen. But the background effect of each line obscures the second. I can set the display to be block, but that would stretch the background to 100% of the window, which isn't what I want when the page is not narrow.
Thanks in advance
EDIT: CODE
<div class="PageSection">
<a class="LinkButton" href="">This Is My Link, There Are Many Like It But This One Is Mine</a>
</div>
.PageSection {
width: 100%;
margin: 50px 0px 50px 0px;
text-align: center;
font-size: 30px;
}
input[type="button"],
input[type="submit"],
.LinkButton {
padding: 5px 10px 5px 10px;
cursor: pointer;
color: inherit;
font-size: inherit;
text-decoration: none;
line-height: 100%;
border: none;
background-color: transparent;
}
input[type="button"]:hover,
input[type="submit"]:hover,
.LinkButton:hover {
background-color: #FF5A19;
}
EDIT:
I know I could set the line-height css property, but that gives the link ugly spacing, and I am also aiming for a square block of background colour, just not to the full width of the page.
assuming your padding is for creating that extra block effect.
try
.PageSection {
width: 100%;
margin: 50px 0px 50px 0px;
text-align: center;
font-size: 30px;
}
input[type="button"],
input[type="submit"],
.LinkButton {
/*padding: 5px 0 5px 0;*/
cursor: pointer;
color: inherit;
font-size: inherit;
text-decoration: none;
line-height: 100%;
border: none;
background-color: transparent;
background-clip: padding-box;
}
input[type="button"]:hover,
input[type="submit"]:hover,
.LinkButton:hover {
background-color: #FF5A19;
box-shadow: 10px 0 0 0px #FF5A19,-10px 0 0 0px #FF5A19;
}
all you need on the link is background-clip: padding-box; on the link and some box-shadow to cover the extra bit where padding can't reach due to inline element behaviour.
Edit: JSFiddle
I think i have managed to do what you wanted, do you want it multi-lined even on full width or when page width is smaller
I have used multiple spans tags to controls the lines
<div class="PageSection">
<a class="LinkButton" href=""><span>This Is My Link, </span> <span> There Are Many Like </span> <span> It But This One Is Mine </span></a>
</div>
here is the fiddle on what i have achieved
I HAVE UPDATED THE FIDDLE to your desired outcome
See the FIDDLE here
Using Bootstrap 3 and trying to get a simple transparent button look like on getbootstrap website home page. using the following code is giving me the default bootstrap button look with the gradient in the background instead of the look I am going for. I cannot figure out what I am doing wrong. Here is the CSS:
.btn-outline{color:#540300;background-color:transparent;border-color:#540300;}
.btn-outline:hover,.btn-outline:focus,.btn-outline:active{color:#fff;background-color:#540300;border-color:#333;}
and my HTML:
Test Button
Revised JS Fiddle Revised fiddle
.btn {
-webkit-border-radius: 10;
-moz-border-radius: 10;
border-radius: 10px;
font-family: Calibri;
color: #594080;
font-size: 20px;
background: #ffffff;
padding: 10px 20px 10px 20px;
border: solid #594080 1px;
text-decoration: none;
}
.btn:hover {
background: #594080;
text-decoration: none;
color: white;
}