How we can create simple and clean buttons using Bootstrap? Solution: See this Bootstrap Clean Buttons With Hover Effect, Plain Button UI Kit.
Previously I have shared some button related programs, but these buttons are based on bootstrap library. Basically, buttons are very useful in a website and web apps. The button is a major way to navigate and good user interaction design. And nowadays buttons comes with unique designs, like ghost button, material button, etc. In this simple button UI kit, you will get all types of buttons: normal, ghost, with hover effect, bottom shadow, etc.
Today you will learn to create basic and clean buttons using bootstrap’s prebuilt class. There are 7 groups of buttons with different sizes, styles, or effects. Some buttons are rounded, some are flat, some are ghost buttons, and some are big or small. There are hover effects, and some buttons have a bottom border. In other words, there are all the basic types of buttons which used on websites.
So, Today I am sharing Bootstrap Clean Buttons With Hover Effect. There I have used the bootstrap library to create the buttons, and custom CSS for styling. There are many types of buttons, you can pick your favorite one place it on your project. You just have to link the bootstrap CDN and place the class names to create the buttons.
If you are thinking now how these buttons actually are, then see the preview given below.
Preview Of Plain Button UI Kit
See this video preview to getting an idea of this button kit looks like.
Live Demo
Now you can see this visually, also you can see these live by pressing the button given below. If you like this, then get the source code of its.
You May Also Like:
- CSS Flat Breadcrumbs
- Material Hamburger Menu Transform
- Material Color Picker
- Animated Download Button
Before sharing source code, let’s talk about it. First I have created the header element and placed heading text. Now I have multiple sections for different button sections. Inside a section, I have placed 6 buttons with bootstrap’s pre-built class names and another class name for giving color values. In the HTML file, I have linked CSS file and bootstrap’s CDN link.
Now using CSS I have placed all the elements in the right place, as you can see in the preview. With CSS I gave basic values like size, position, margin, padding, etc to the elements. I gave different color values to the buttons, and also gave values to hover effects. Left all other things you will understand after getting the codes, I can’t explain all in writing.
For creating this program you have to create only 2 files, one for HTML and one for CSS. Follow the steps to creating this program without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
lang=“en” >
charset=“UTF-8”> rel=“stylesheet” href=“https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css” > href=‘https://fonts.googleapis.com/css?family=Raleway:400,700,300’ rel=‘stylesheet’ type=‘text/css’> rel=“stylesheet” href=“style.css”>
Bootstrap Clean Buttons
class=“wrap”>class=“btn btn-default btn-lg” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-primary btn-lg” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-success btn-lg” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-info btn-lg” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-warning btn-lg” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-danger btn-lg” href=“#”>BOOTSTRAP BUTTON
class=“wrap”>class=“btn btn-default btn-lg btn-border” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-primary btn-lg btn-border” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-success btn-lg btn-border” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-info btn-lg btn-border” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-warning btn-lg btn-border” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-danger btn-lg btn-border” href=“#”>BOOTSTRAP BUTTON
class=“wrap”>class=“btn btn-default btn-lg btn-round” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-primary btn-lg btn-round” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-success btn-lg btn-round” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-info btn-lg btn-round” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-warning btn-lg btn-round” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-danger btn-lg btn-round” href=“#”>BOOTSTRAP BUTTON
class=“wrap”>class=“btn btn-default btn-lg btn-square” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-primary btn-lg btn-square” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-success btn-lg btn-square” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-info btn-lg btn-square” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-warning btn-lg btn-square” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-danger btn-lg btn-square” href=“#”>BOOTSTRAP BUTTON
class=“wrap”>class=“btn btn-default btn-lg btn-3d” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-primary btn-lg btn-3d” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-success btn-lg btn-3d” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-info btn-lg btn-3d btn-round” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-warning btn-lg btn-3d btn-round” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-danger btn-lg btn-3d btn-round” href=“#”>BOOTSTRAP BUTTON
class=“wrap”>class=“btn btn-default” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-primary” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-success” href=“#”>BOOTSTRAP BUTTON
class=“clearfix”>
class=“btn btn-default btn-sm” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-primary btn-sm” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-success btn-sm” href=“#”>BOOTSTRAP BUTTON
class=“clearfix”>
class=“btn btn-default btn-xs” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-primary btn-xs” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-success btn-xs” href=“#”>BOOTSTRAP BUTTON
class=“wrap”>class=“btn btn-default btn-block” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-primary btn-block” href=“#”>BOOTSTRAP BUTTONclass=“btn btn-success btn-block” href=“#”>BOOTSTRAP BUTTON
|
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ body { font-family: ‘Raleway’; } header { text-align: center; padding: 120px 0; background: #fff; color: #000; } header h1 { margin: 0 0 15px 0; padding: 0; font-size: 42px; font-weight: normal; } section .wrap { width: 1024px; text-align: center; margin: 0 auto; padding: 120px 0 60px 0; } section .btn { margin: 0 30px 60px 30px; } section.one { background: #1abc9c; } section.two { background: #f5d76e; } section.three { background: #d24d57; } section.four { background: #f1a9a0; } section.five { background: #c5eff7; } section.six { background: #fde3a7; } section.seven { background: #81cfe0; } .btn { font-weight: bold; font-size: 12px; letter-spacing: 2px; padding: 13px 17px; border: none; -webkit-border-radius: 2px; -webkit-background-clip: padding-box; -moz-border-radius: 2px; -moz-background-clip: padding; border-radius: 2px; background-clip: padding-box; transition: color 0.2s linear, background-color 0.2s linear; } .btn.btn-default { color: #000; background-color: #ffffff; border: 1px solid #e6e6e6; } .btn.btn-default.btn-border { border-color: #ffffff; color: #fff; } .btn.btn-default.btn-3d { box-shadow: inset 0 -2px 0 #cccccc; } .btn.btn-default:hover { background-color: #e6e6e6; color: #000; } .btn.btn-primary { background-color: #3498db; } .btn.btn-primary.btn-border { border-color: #3498db; color: #3498db; } .btn.btn-primary.btn-3d { box-shadow: inset 0 -2px 0 #196090; } .btn.btn-primary:hover { background-color: #217dbb; color: #fff; } .btn.btn-success { background-color: #2ecc71; } .btn.btn-success.btn-border { border-color: #2ecc71; color: #2ecc71; } .btn.btn-success.btn-3d { box-shadow: inset 0 -2px 0 #1b7943; } .btn.btn-success:hover { background-color: #25a25a; color: #fff; } .btn.btn-info { background-color: #81cfe0; } .btn.btn-info.btn-border { border-color: #81cfe0; color: #81cfe0; } .btn.btn-info.btn-3d { box-shadow: inset 0 -2px 0 #32aec9; } .btn.btn-info:hover { background-color: #58bfd6; color: #fff; } .btn.btn-warning { background-color: #f39c12; } .btn.btn-warning.btn-border { border-color: #f39c12; color: #f39c12; } .btn.btn-warning.btn-3d { box-shadow: inset 0 -2px 0 #976008; } .btn.btn-warning:hover { background-color: #c87f0a; color: #fff; } .btn.btn-danger { background-color: #c0392b; } .btn.btn-danger.btn-border { border-color: #c0392b; color: #c0392b; } .btn.btn-danger.btn-3d { box-shadow: inset 0 -2px 0 #6d2018; } .btn.btn-danger:hover { background-color: #962d22; color: #fff; } .btn.btn-lg { font-size: 14px; padding: 17px 24px; } .btn.btn-sm { padding: 9px 14px; } .btn.btn-xs { font-size: 11px; padding: 7px 12px; } .btn.btn-border { border: 2px solid; background: transparent; } .btn.btn-round { -webkit-border-radius: 40px; -webkit-background-clip: padding-box; -moz-border-radius: 40px; -moz-background-clip: padding; border-radius: 40px; background-clip: padding-box; } .btn.btn-square { -webkit-border-radius: 0; -webkit-background-clip: padding-box; -moz-border-radius: 0; -moz-background-clip: padding; border-radius: 0; background-clip: padding-box; } |
That’s It. Now you have successfully created Bootstrap Clean Buttons With Hover Effect, Plain Button UI Kit. If you have any doubt or question then comment down below.
Thanks For Visiting, Keep Visiting.
