Add css class to button

W3.CSS Buttons

Both the w3-button class and the w3-btn class add button-behavior to any HTML elements.

The most common elements to use are , , and :

Example

Button Colors

Black Khaki Yellow Red Purple Aqua Blue Indigo Green Teal

All the w3-color classes is used to add color to buttons:

Example

Hover Colors

Hover effects also come in all colors. Here are some:

White Red Purple Aqua Blue Green Teal

The w3-hover-color classes is used to add hover color to buttons:

Example

Button Shapes

Normal Round Rounder and Rounder and Rounder

Normal Round Rounder and Rounder and Rounder

The w3-round-size classes are used to add rounded borders to buttons:

Example

Button Sizes

Tiny Small Medium Large XLarge

The w3-size classes can be used to define different text sizes:

Example

Button Borders

Button Button Button Button

Button Button Button Button

The w3-border class can be used to add borders to buttons.

The w3-border-color classes are used to define the color of the border:

Example

Tip: Add the w3-round-size class to add rounded borders.

Buttons With Different Text Effects

Buttons can use a wider text effects:

The w3-wide class adds a wider text effect:

Example

Buttons can have italic and bold text effects:

Normal Italic Bold

Use standard HTML tags ( and ) to add italic or bold effect to the button text:

Example

Buttons With Padding

The w3-padding-size classes is used to add extra padding around the button text:

Example

Full-width Buttons

To create a full-width button, add the w3-block class to the button.

Full-width buttons have a width of 100%, and spans the entire width of the parent element:

Источник

Add CSS to a JavaScript button

You could use this code to add a css class to each button:

 leftBtn.className = "leftOne"; rightBtn.className = "rightOne"; fireBtn.className = "fireOne"; 

Then you can use regular css to style them.

then in my example just change leftOne, rightOne and fireOne to btn and then each will have the btn css class assigned to it.

leftBtn.className = «btn-primary»; rightBtn.className = «btn-primary»; fireBtn.className = «btn-primary»; Doesn’t work. (picturepan2.github.io/spectre/elements/buttons.html)

?? Doing so assigns the «btn-primary» css class to each button an allows you to style the button by using

What doesn’t work about it?

I see on the page you linked to that you need to use «btn btn-primary» so use leftBtn.className = «btn btn-primary»; rightBtn.className = «btn btn-primary»; fireBtn.className = «btn btn-primary»;

You could add a class to your buttons, and then add any styling in CSS:

leftBtn.className = "class_name" 

You probably need to use the className to your Javascript:

In general, there are two main ways to do that.

The first one using inline styles, just keep in mind that inline style has the highest precedence in a document.

The second is by using the class name. You can simply define a class name and write CSS for this class name.

element.className.add = 'your-class-name' 

In a second way, you can manage class names by using methods like add , remove , toggle

Источник

Add css to button

have you not tried adding a css class to the button? or setting a button definition in the css? or adding the css directly to the button?

5 Answers 5

You could add class=»button» to the button to make it work. Cause your CSS .button will be used on every element which has the class=»button»

As your button class you’ve set it «.button» add «button» as a class like above Anything you put after the . will match the name of the class in the element

https://css-tricks.com/the-difference-between-id-and-class/ explains how you use classes, ids and what they do in good detail

In your case, you’re two solutions :

First : use classe, if you’ve differents buttons in your pages : you can just add class attribute in your HTML element like that :

  Player function myFunction()  

And define the style in your class in your CSS :

Second : If all buttons are the same style, you can just add style for all element button :

  Player function myFunction()  

But, in your CSS, just change the reference, for select elements button :

You can learn more explain about selector ( .myClass , #myId , element ) here in the mozilla developper website.

Don’t forget, for optimize your web code, use as little code as possible, for reduce weight of pages, and to correctly use the different selectors (classes or id as not mandatory for CSS style : that depend to your utility) 🙂

Instead of declaring class button i.e(.button) you can apply style to all button elements.

If you want to style a button I recommend adding a class to it and styling it with CSS. Here is an example below.

So what the CSS and HTML code above will do is it will create a blue button with a curved border and with a height of 100 pixels and width of 180 pixels. Now, the next question you might ask is how do I make an animation on the button when I hover over it?

CSS Hover Animations are a bit tricky at the start but get easier with practice. When I make buttons for my websites I like to use a site called ButtonAnimations because it gets straight to the point and gives me tons of animations (with HTML & CSS code) to choose from. Totally recommend it because it simply provides you with amazing buttons and animations that you can just copy and paste into your code. ButtonAnimations Website Link: ButtonAnimations — Create Spectacular Button Animations with HTML 7 CSS

Источник