Create my own colored Buttons with hover effect [Solved]

Webdesign Help
1

Having a website with a lot of buttons, each has another color.

I used the standard Bootstrap Studio Button to create them all, then I wanted to chance each button color,
only visible color and rollover color, onclick stays the same.
Tried to add a class in ATTRIBUTES window under Class Names: btn btn-primary green
then changed the background color to green for this class.

But then all the hover, active and onclick colors are, the button stays green forever.

Now I am thinking of crate my own buttons with all the effects, but how do I do this?

I mean this square with background color and text inside, with hover effect and on click effect with a link.

Happy for any inputs… :slight_smile:

2

I found this codepen…

Sassy Button

and created using the scss stylesheet…

Might work if you have a lot of buttons to do

1 Like
3

Give each button a unique ID and then create the CSS accordingly. That should fix your issue.

2 Likes
4

Here is another one
hover effects

5

Thanks for all your hints.
I found a pretty nice tool to create the button colors as I desire them:

then I used this tool to generate a custom theme:
https://bootstrap.build/app

But now I am stuck in adding my custom generated button theme to the custom made bootstrap theme.
Is it not possible to add more styles to the 9 predefined styles (danger, alert, etc.) ?
Can I only overwrite these ones?

Do I have to add more styles in variables.less?

1 Like
6

Just add your own to your CSS, they are just predefined styles. Look at how they are constructed in the Styles window, check to see if any other CSS classes are called into effect and duplicate that setup for your own predefined styles.

The other option would be to set it up in that nice theme builder so it’s already predefined in there. That would be my first option I believe.

7

Its common to add custom css to a custom theme. More often when someone is selling a theme.

You could open the app builder theme you created in a editor like Atom, Sublime, or VS code and copy and paste the custom button css at the bottom of the theme. Then save and import as a theme into Bootstrap Studio. Then choose that theme…

Now your custom bootstrap.css theme will be locked as usual but also contain the new button css. There may be a good reason for doing this but as Jo indicated it may be better to just import the css for the additional buttons made from the very cool builder you provided us with. Less work because you can make changes inside Bootstrap Studio now rather than having to import the changes to the theme. Once its locked, you can only do overrides.

There is a far more complicated way of actually creating the theme inside Bootstrap Studio using its sass compiler but most dev/designers prefer to just override the css. Then you would use the variables.scss, not variables.less as Less was used in Bootstrap 3.

8

Thanks for both of your hints!

I guess there are only the standard 9 styles I can use in a custom-made theme which I can override (what I did), its somehow not possible to create more styles (I need 12 for my project).

After creating additional 3 button stylen in this cool online generator and copied them into the styles.css file from my website, I was not able to add it with my custom made class. since the button btn-btn-info is locked, I am not able to manually select my added style dinimere.

This is very annoying and brings me back to the first question of this thread:

How can I create a button from scratch (which is not locked)?
@twinstream: I have no idea where to add your codepen SASS Button Mixing since there is no possibility to edit html in bootstrap.

I also tried giving a button a fix ID, so I was able to change its color, but of course lost all the hover
and active states…

N.B.
the variables.scss is only located in the documentation folder and nowhere else on the system… I am feeling like in the jungle, cool tool but very weird with this lock states…

N.B.2
Is there a BootstrapStudio available witch is not locked and where I can also edit the html?

9

Update, I found a way (its not elegant, its time consuming, but it works):

Create an ID for the button you want to change the color e.g: unique

then open your style.css (preferred in an external editor) and add these 3 classes:

#unique {
  background: rgb(67,116,80);
  /* regular color */
}

#unique:hover {
  background: #0400ff;
  /* hover color */
}

#unique:not(:disabled):not(.disabled):active {
  background: #2e2e30;
  /* when pressed color */
}

change the colors as you need them (see comments).

Boa…