Making a website is a fun and interesting project. However, styling your website with the help of CSS could be more difficult than it may seem in the beginning. Thankfully, there is Bootstrap to save the day. It is a framework that helps you build responsive websites in the most easiest way.

Now, we browse many different websites on a daily basis and they come in so many different styles and colours while Bootstrap gives your website a very particular theme. However, customising them is actually very easy and you do not need to be an expert in CSS for that.

Bootstrap Buttons

Bootstrap allows you to have some default button styles shown as follows. You can learn more about them here.

While they make your website attractive, the variation is limited and can become repetitive after a few projects. But fear not, it is actually very easy to customise them.

Code Along

Changing the Background

If you want to change the colour of the button or the text colour, then you have to insert the following CSS in your code. Let us change the background of our button into a nice purple and the text into a black one. You can choose any color of your choice.

<!DOCTYPE html>
<html lang="en">
	<head>
  	  <style type="text/css">
			.btn-primary{
				background-color: #ad1b98 !important;
				color: black !important;
			}
    	</style>
  		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
	</head>
	<body>
		<div class="text-center">
			<button class="btn btn-primary" type="button" onclick="display()">Click Here</button>
			<p id="demo" class="p-3"></p>
			<script>
				function display(){
					document.getElementById("demo").innerHTML = "Hello There!";
				}
			</script>
		</div>
	</body>
</html>
Change Bootstrap Button Colour

Adding Animation

We have successfully changed the appearance of the button and you can leave it here if you want. However, if you have noticed, this button has no animation. Now there is an endless animation style. We will go over some of the basics.

Hover

Here we are changing the colour of the button and the text such that it changes when the mouse hovers over the button. Add the following code inside the <style> tag.

.btn-primary:hover{
	background-color: #20051c !important;
	color: white !important;
}
Change Bootstrap Button Colour

With some experiments, you can also add transitions to create fun effects. One such example where we are enlarging the button is given as follows.

.btn-primary{
	background-color: #ad1b98 !important;
	color: black !important;
	-webkit-transition: font-size 0.5s;
	transition: font-size 0.5s;
}
.btn-primary:hover{
	background-color: #20051c !important;
	color: white !important;
	font-size: 1.1em;
}
Change Bootstrap Button Colour

Click Animation

There are mainly two kinds of selectors used for the purpose: active and focus. You can use them according to your requirement.

Focus

Focus represents the state when the button is currently selected. Let us give it a lighter purple colour.

.btn-primary:focus{
	background-color: #e34ccd !important;
	color: white !important;
}
Change Bootstrap Button Colour

Active

Active represents the state when the button is currently being activated by the user. Let us take the same example.

.btn-primary:active{
	background-color: #e34ccd !important;
	color: white !important;
}
Change Bootstrap Button Colour

Now with CSS selectors, there are endless possibilities for you to create unique effects such as ripple effect or any smooth animation. You can learn more about CSS selectors here.

We will discuss other cool animation tips and tricks with CSS in our future articles. Till then, keep experimenting!