CSS Transitions to Buttons

Bootstrap Studio Help
1

Hello! I am a proud user of Bootstrap Studio for the last 6 months or so, I have the 29,00 license and I am seriously considering buying the 60,00 one just because for the help this program provides, it is worth it’s money and the developer seems to really care about the community and enhancing the product. That said, the only thing that I can’t find anywhere how to implement directly in the code is a transition for hovering effects and such. (There are other things that are less urgent and were already tackled by the developer for future updates).

Before asking this topic, I ran on the forum and tried to find something related to it, but I can’t seem to find any answers. So… can somebody help me with CSS transitions?

1 Like
2

Bootstrap has hover effects built into some components (like buttons) by default, but there are no tools in BSS’s UI to add hover effects to components that lack them natively.

You can easily add hover effects to most any component using the :hover selector, but you will need to learn CSS and familiarize yourself with transitions, transforms, opacity, etc…

There are tons of tutorials on the web on adding hover effects, but if you’re not familiar with writing CSS, it’s best to start by learning the basics of CSS, and go forward from there.

1 Like
3
4

Also there are settings within BSS to add things like Hover effects, but the number of effects are limited.

Just select any component or image etc. and then go to the Animation tab in the top right of the app. Choose Hover in the Trigger and then choose the type of animation you want it to do.

5

Thank you for your reply. The thing is, I know how to add hover into the CSS, but I can’t seem to be able to make the transitions from one state to the other.

6

I tried to use the @keyframe solution, but I can’t seem to make it work properly. I know how to make the hover effect, it’s not a problem to write it in CSS, what I can’t seem to make it work is a transition from a hover to the other. Because I want the hover to take some time. I tried transition-duration, transition-timing-function: ease, but seriously I can only make the hover change colors and appearance, but not change the duration.

7

Hi, this tool seem really nice! Before replying, I try to test what was suggested as solution. The codes available there are really nice, but I just want to make a transition from a first state into a hover change. For example:

.btn {
background-color: red;
}
.btn:hover {
backgorund-color: blue;
}

That changes the color when the mouse hovers the button, but I just want the transition from one to the other to take a certain amount of time rather than being instantaneous. But Bootstrap Studio is setting my code as “invalid” when I try to use transitions, even if I use auto-complete to right the text from BS itself!

8

You need to brush up on your CSS. You forgot to add the transition rule in your classes.

.btn {
  background-color: red;
  transition: background-color .3s;
}

.btn:hover {
  background-color: darkred;
  transition: background-color .3s;
}

This will produce a smooth transition from one color to the other over a period of three tenths of a second. If you are trying to slowly change multiple characteristics of the button aside from the background-color (ex. text color, button size, etc…,) you can just use transition: all .3;

9

imagem_2022-09-08_220210975
imagem_2022-09-08_2202109751920×1080 217 KB

10

For some REALLY odd reason, the only transition that works is “all”. Which is the best. Thank you very much! I can’t believe it worked!!!

11

The css property transition should only be on the .btn class like this

.btn {
  background: red;
  -webkit-transition: background 300ms ease-in 0s; /* For Safari 3.0+ */
  transition: background 300ms ease-in 0s;  /* Standard syntax */
}

.btn:hover {
  background: blue;
}
12

There are mistakes in your CSS syntax. You added an unnecessary colon after background-color. That’s why BSS is showing the rule in red with a line through it.

13

My example seems to work fine…

button-example

14

Please, stop recommending w3s…

About the topic, you will need to use css, this is Front-End focused tool, it’s not really a full website builder, this is a tool focused to help make frontend with bootstrap. Personally i think it would be cool idea to implement state transitions for hovers, focus, active etc just basic ones like few simple transitions like scale etc, but still in css it takes literally 20secs to implement it, so…

1 Like
15

Why? It’s a good site for beginners to learn from. I’ve found it to be a very useful reference.

That’s your opinion. I’ve been using it to make a living building websites for the last four years.

I respect that you’ve got a lot of experience and some ardent opinions, but your way of doing things isn’t the only way.

16

Perhaps this link can offer you some help.

1 Like
17

Obrigado Gilmar, embora esteja muito contente com os resultados das respostas anteriores, é sempre bom ter o máximo de conteúdo disponível, principalmente em português.

1 Like
18

I’m really happy with the solution of “all”. It solves flawlessly all the problems I had and help me grow the transitions into padding and margin territory. But thank you for enriching your answer!

19

At the moment I see no problem with recommending W3s, I just don’t feel good at having ONLY W3s recommended on to me. As long as there is more to an answer than W3s, I think that it channels to a good place for official information regarding the best practices of front end tools like html and css.

20

W3 schools is a good place to become familiar with the fundamentals of website development, but there are countless resources for learning HTML, CSS, Javascript, Bootstrap, etc…

Another very useful site that has both a ton of useful info, and a massive community of people who answer questions about anything programming-related is Stackoverflow. If you do any sort of coding for a living, having a Stackoverflow account is kind of a given.