I created a submit button and anchor link with same class name, with same style. But the result is different. My anchor link is bigger than my submit button. Like this
Here's the snippet
.btn {
display: inline-block;
background: red;
margin:10px;
padding: 13px 30px;
border:none;
border-radius: 4px !important;
box-shadow: 0 4px 0 0 blue;
color: #fff;
font-size: 18px;
text-transform: uppercase;
}
<input type="submit" value="Login" class="btn">
Login
How to make it have same size? without set the height to exactly px or set the line height of the element. Thanks in advance
on the jsfiddle or sippet have same style, but when I create and run on local browser it's say different thing
Setting a line-height in the .btn class makes them equally tall.
.btn {
line-height: 1em;
display: inline-block;
background: red;
margin:10px;
padding: 13px 30px;
border:none;
border-radius: 4px !important;
box-shadow: 0 4px 0 0 blue;
color: #fff;
font-size: 18px;
text-transform: uppercase;
}
<input type="submit" value="Login" class="btn">
Login
Related
is there any way to prevent the button resizing by the number of text characters inside the button?
I have 2 buttons with the same CSS class but the size of one of them is different because of the number of characters inside it
<button class="my-btn" type="submit">Send</button>
<button class="my-btn" type="button">Subscribe</button>
CSS:
.my-btn {
padding: 10px 40px;
text-align: center;
border-radius: 30px;
border: 5px solid #6f97fd;
font-size: 0.8rem;
font-weight: bold;
color: white;
display: inline-block;
background: linear-gradient(90deg, #76b3fe , #8680e4 );
}
You just need to give it a width. Below I've given it 200px, you can change this to your preference.
Additionally, apply min-width or max-width if you want to ensure it doesn't go below or above a certain width.
.my-btn {
padding: 10px 40px;
text-align: center;
border-radius: 30px;
border: 5px solid #6f97fd;
/*change width to your preference*/
width: 200px;
font-size: 0.8rem;
font-weight: bold;
color: white;
display: inline-block;
background: linear-gradient(90deg, #76b3fe , #8680e4 );
}
<button class="my-btn" type="submit">Send</button>
<button class="my-btn" type="button">Subscribe</button>
You could use max-width in .my-btn class
I think fix width is your solution
.my-btn {
padding: 10px 40px;
text-align: center;
border-radius: 30px;
border: 5px solid #6f97fd;
font-size: 0.8rem;
font-weight: bold;
color: white;
display: inline-block;
background: linear-gradient(90deg, #76b3fe , #8680e4 );
width: 150px;
}
<button class="my-btn" type="submit">Send</button>
<button class="my-btn" type="button">Subscribe</button>
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>
I´m trying to do some buttons with image and text, and I already did this work.
But now I´m studying a diferente hypothesis, If I have a text bigger I´m trying to center the text in the button but I´m not having sucess put this right. I´m not having succeess putting my very big is not good align-center just below the 1st text.
Have you ever had a case like this? How we can solve this?
I have this Html for two buttons:
<button class='btn'>
<img class="big_btn" src="icon1.png" width="40" height="40"/>
Big button so big <span> very big is not good</span>
</button>
<button class='btn'>
<img src="icon1.png" width="40" height="40">
2button big
</button>
And I have this css file:
.btn {
position: relative;
width: 180px;
height: 60px;
margin-top:7%;
padding: 0 10px 0 10px;
line-height: 37px;
text-align: left;
text-indent: 10px;
font-family: 'bariol_regularregular';
font-size: 15px;
color: #333;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #f1f1f1; /* button background */
border: 0;
border-bottom: 2px solid #999; /* newsletter button shadow */
border-radius: 14px;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #999;
box-shadow: inset 0 -2px #999;
}
.btn:active {
top: 1px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn img { float: left;}
.btn .big { margin-top:10px;}
.btn:hover { background-color: #f7f7f7;}
Here's the Fiddle: http://jsfiddle.net/3F9pu/
My image updated:
Your problem is your line-height attribute. If you set that to be 37px, each new line of text will be separated by 37px. Remove `line-height:37px and the text will wrap around the image.
line-height: 37px
I also removed your text-indent and replaced it with a margin on your floated image to make the text all align properly.
.btn img{
float:left;
margin-right: 10px;
}
text-indent: 10px
JSFiddle
Use a CSS background image.
Have a fiddle - Fiddle Link!
HTML
<button class='btn'>Big button so big very big is not good</button>
<button class='btn'>2button big</button>
CSS
.btn {
background: url("http://lorempixel.com/output/cats-q-c-40-40-3.jpg") #CCC 10px no-repeat;
border: none;
padding: 10px 10px 10px 60px;
width: 200px;
text-align: left;
vertical-align: top;
min-height: 60px;
cursor: pointer;
}
.btn:hover {
background-color: #F00;
}