Advanced CSS Button Maker



Selected Button

Width

Height

Font Size

Color

Background Color

Border Style

Border Color

Border Width

Border Radius

Border Color

Border Top Color

Border Bottom Color

Border Left Color

Border Right Color

Border Style

Border Width

Measurment
Border Top Width

Border Bottom Width

Border Left Width

Border Right Width

Border Radius

Measurment
Border Top Right Radius

Border Top Left Radius

Border Bottom Right Radius

Border Bottom Left Radius

Padding

Button Alignment



.buttons-0{ 
width: 15%; 
height: 50px; 
font-size: 15px; 
color: #ffffff; 
background-color: #8713d2; 
border-color: #ff00a0; 
border-width: 2px; 
border-top-right-radius: 0px; 
border-top-left-radius: 0px; 
border-bottom-right-radius: 0px; 
border-botttom-left-radius: 0px; 
padding: 5px; 

 } 
.buttons-0:hover {
width: 15%; 
height: 50px; 
font-size: 15px; 
color: #ffffff; 
background-color: #342fc7; 
border-color: #ff00a0; 
border-width: 2px; 
border-top-right-radius: 0px; 
border-top-left-radius: 0px; 
border-bottom-right-radius: 0px; 
border-botttom-left-radius: 0px; 
padding: 5px; 

 } 
.buttons-0.active {
width: 15%; 
height: 50px; 
font-size: 15px; 
color: #ffffff; 
background-color: #39c720; 
border-color: #ff00a0; 
border-width: 2px; 
border-top-right-radius: 0px; 
border-top-left-radius: 0px; 
border-bottom-right-radius: 0px; 
border-botttom-left-radius: 0px; 
padding: 5px; 

 } 
<div class="btn-align">
<button class="button-class">Button</button>
</div>