Posted in
2757
1:25 am, June 29, 2022
Create a button with CSS, HTML and Center it!
A nice quick video on how to create a button with css and center it.
Going from a blank html page into a div element with a button in it and then centering the button and giving it some life with some hover over effects.
I thought i would mix it up a bit and create a video on how it is coded, you can see it here.
Create a button with CSS, HTML and Center it! Demo
View Demo Full Screen View Demo New Tab
Create a button with CSS, HTML and Center it! Code
HTML
<p>
Lets center a button with css...
</p>
<p>
1st some fonts...
</p>
<p>
Actually dont bother with bootstrap for this.
</p>
<p>
Add a box with some padding and background.
</p>
<p>
Now add a button. Not yet a button, but we can fix that.
</p>
<p>
Ok it looks like a button now. Add a hover over state to make it appear active when moused over.
</p>
<p>
Looks like i added the button styles to the outer element rather than the button, fix that.
</p>
<p>
Ok now center the button. As its inline block display, it should be centered with text align center.
</p>
<p>
A button in a div that is centered.
</p>
<div class='my-box'>
<div class='my-button'>
<a href='#!'>My Button!</a>
</div>
</div>
CSS
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
* {
font-family: 'Montserrat', sans-serif;
}
.my-box {
padding:20px;
background:teal;
color:#FFF;
border-radius:10px;
min-height:120px;
}
.my-button {
text-align:center;
}
.my-button a:hover {
background:#EEE;
box-shadow:0px 1px 2px #000;
}
.my-button a {
text-decoration:none;
color:#444;
padding:15px 20px;
background:#FFF;
border-radius:5px;
display:inline-block;
}
Related Tags
Add Comment
Other Items in CSS Tips
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
HTML Canvas
javascript