Multiple CSS styles on a html button - html

I am trying to make a button for a message system to show an orange dot if there's a new message. However, i can't quite get it working. Is it possible?
Here's the button
<input type="button" value="Messages •" />​
And the button on jsFiddle if anyone feels like trying out :-)
http://jsfiddle.net/ePA47/1/

Use a button element instead.
<button type="button">
Messages <span style="color: orange;">•</span>
</button>
Of course, don't add your stylings inline. I just did for this example's sake.
You could also add a class to the button such as new-messages and then do...
button.new-messages:after {
content: "•";
color: orange;
}
Just keep in mind the latter won't work in older IEs.

Use <button> instead of <input> since it has child elements which you can style.

To add an orange dot to your button, I would recommend using a background-image. This will give you the ability to design the dot however you wish, and not be constrained by font types.
It's also better for accessibility if the orange dot is added as a background image, as this is not content.
<input type="button" value="Messages" class="newmessage" />​​​​​​
​.newmessage
{
background-image:url('http://img859.imageshack.us/img859/9611/orangedot.jpg');
background-repeat:no-repeat;
background-position:right center;
padding:5px;
padding-right:25px;
}
See Demo: http://jsfiddle.net/ePA47/3/
​

As per the question heading, the following will help to add multiple styles in a single style tag
<button type="button" style= "margin-top : 20px; border-radius: 15px"
class="btn btn-primary">View Full Profile
</button>

Related

How to make a png file a button in html

I'm not a programmer by trade, but I'm trying to turn a PNG file into a button in html but im having trouble getting the button to be flush with the png in a way that doesn't look bad. I've googled many solutions so far but either i don't have the understanding to implement the fixes or my problems isn't what i think it is.
<a href="file:///E:/eLibrary_Jamaica_2019/Please_Click_Me_For_eLibrary.html">
<button type="submit" style="height:80px; width:360px "><img src="../../Web/media/images/FULLLOGOENACTUS 2.png" width="360" height="80" alt="" padding-right="50px" syle="content-align:center"
alt="Submit">
</button>
</a>
This is what the current code produces.
You could add the following CSS to the code:
button {
padding: 0;
}
img {
width: 100%;
height: 100%
}
This fits the png within the button and removes the button padding (buttons have padding unless you remove it). You could also add this to your inline html:
<a href="file:///E:/eLibrary_Jamaica_2019/Please_Click_Me_For_eLibrary.html">
<button type="submit" style="height:80px; width:360px; padding: 0"><img src="../../Web/media/images/FULLLOGOENACTUS 2.png" width="360" height="80" alt="" padding-right="50px" syle="content-align:center; width: 100%; height: 100%"
alt="Submit">
</button>
</a>
Side note.. you shouldn't wrap buttons in a tags. this is bad for seo, accessibility, and many other things.. Just wrapping your image in an a tag and styling accordingly will do what you're looking for whilst being compliant. A button isn't needed unless you're trying to submit a form of some sort -- and even in that case, don't wrap the button in an a tag
Use a class on your button and style it from within the style sheet using background.
<input type="button" class="button" ...>
then in your style sheet
.button
{
background: url(path/to/img.png) no-repeat ...;
cursor: pointer;
....
}
It is just always a good idea to separate your markup from your styles. I would also suggest that whatever the button actually does (unless it is just a link to something else), use javascript for that.

Changing the colour of a button

I'm having problems in order to change the colour of this button. This is the code:
<div class = "Petrol">
<a href="PayMethod.php"><button class="btn btn-default btn-lg" type="button"><span class="Text">Petrol<br><small>(Hi-Grade)</small></span></button>
</a>
</div>
Can you please help me?
if you need to change the color of the button do this:
.btn {
background-color:blue;
}
if you need to change the text inside the color of the button
.btn {
color:red;
}
Assuming by the classes you used, I think you are using Bootstrap. Bootstrap provide pre-defined classes to change bg color of buttons. Replace btn-default by any of the following to get a different color. btn-primary, btn-success, btn-info, btn-warning, btn-danger, and btn-link.
Take a look at the docs.
You could also apply a custom class btn-custom and style it.
.btn-custom {
background: #ff0; /* use your color here */
}
Straightfoward way works fine
.btn {
color:blue;
}
Example

Bootstrap refresh icon with text on Submit button

I would like to have a "Refresh" button on my page. For that I decided to use the bootstrap refresh-icon style. The icon appears on my button but it does not leave much room for the text "Refresh". Here is the code and Fiddle...
<input class="icon-refresh" type="submit" value="Refresh" name="Test"> </input>
http://jsfiddle.net/jjaleel/kVHbV/339/
Anyone have any suggestions on how I can expand the button width so it shows both the refresh icon and the text?
Thanks.
You could use a button tag instead, they were made to be styled with much more control than an input.
Here's how I would use one with the latest bootstrap..
<button class="btn btn-primary"><span class="glyphicon glyphicon-refresh"></span> Refresh</button>
Use a <button>, with the submit action, instead:
<button type="submit"><i class="icon-refresh"></i> Test</button>
JSFiddle
Put the refresh icon in a span inside a button:
<button type="submit" value="Refresh" name="Test"><span class="icon-refresh"></span> </button>
update (based on OP comment)
Without being able to change the markup at all, this is tough. To get rid of the "Refresh" text, set the text-color to transparent. For sizing, set display to inline-block and fix height and width to 20px.
input{
display:inline-block;
color:transparent;
height:20px !important;
width:20px !important;
}

Appending Buttons to Input-Fields via Twitter Bootstrap

i'm currently working with Twitter Bootstrap and have a problem concerning the size of elements. I'd like to create an input field with an appended button. That's why I'm using a div with "input-append", which sorrounds the input and the button tag.
Now my problem: I want everything to be a bit bigger. So i gave the button tag the property "btn-large". Unfortunately there doesn't seem to be a similar property for the input field.
How can I fit the input field to the appended button?
<div class="input-append">
<input class="span3" id="appendedInputButton" size="16" type="text"><button class="btn btn-large" type="button"><i class="icon-search"></i></button>
</div>
Heres an impression of my problem:
Regards,
Christoph
Define box-sizing to your input field. Write like this:
input, button{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
You can use following style and if you want bigger then increase padding.
input, button{
padding: 7px;
}

Creating a custom html button with background Image and Text

I would like to know how I can create a custom HTML button which has a background Image and I can show a custom text over that image.
For example, I would like to show a submit button for which I have a background image for that button and the text "Submit" comes on top of that Image.
I tried this -
<input type="button" value="Submit" style="background-image: url(pages/images/ButtonBackground.png);">
However, it does not work properly. I just see the test submit and the button but the image does not show up.
I recommend that you use <button> instead of <input type='submit' /> or <input type='button' />. The reason is that you can embed HTML elements (nest elements) into the <button> element. This way, you can make a much more flexible button, which can be customized even more.
<button>
<span class='image'></span>
<span class='text'>Click Me!</span>
</button>
<input type="button" value="Submit" style="background: url(pages/images/ButtonBackground.png) no-repeat; width:px; height:px;">
you have to specify the width and height of the image so it covers your button and yes check the path of the image
this is exactly what I have in one of my css and usually what I do in this situation:
html
<input type="submit" value="" name="commit" id="message_submit" class="registerbtn"/>
css
.registerbtn{background:url(../images/btn_registro.jpg) no-repeat; width:98px; height:32px; border:none;}
The simplest way is probably to use a button element with a background. Use e.g. padding properties to make the button suitably large. It is a useful precaution to set a background color for the button, for use when the background image is not shown for some reason, using a color that has sufficient contrast with the text (so it should be similar in color usage to the background image). Example:
<button type=submit style="background: #ccc url(test.jpg); padding: 0.5em 1em">Go!</button>
Caveat: In old versions of IE, there are several bugs in the implementation of button elements. The bugs bite most seriously if a form has several submit buttons.
The reason for the failure when using an input type=submit element is that they are commonly implemented by browsers using built-in routines that are rather immune to CSS.
Here's how I created buttons with actual pics on them along with text. In CSS I put:
button {
display: inline-block;
height: 200px;
padding: 2px;
margin: 2px;
vertical-align: top;
width: 400px;
}
#alldogs-close-CSS {
background-image: url( All_dogs.jpg );
/*background-size: 100px 130px;*/
height: 150px;
width: 300px;
}
The button controls my height and width and #alldogs-close-CSS is the pic I wanted to show on the button.
In my Index.html page I just put:
<button id="alldogs-close-CSS">All Dogs</button>
Now the text isn't very pretty at the moment, but I haven't played with it yet. It does work, though.