0

I’ve been working to implement a feedback button for an app. The desired design is an all black button with white text. It’s almost there, with the alignment and placement of the text being where we want it, however for some reason only the middle of the button is black, with the top and bottom of it being white. I’ve tried messing around with some of the properties, adjusting height, width, and some of the margin and padding properties, however I can’t seem to isolate what’s causing the issue. I haven’t had a crazy amount of experience with CSS, so I’m thinking maybe there’s something that I’m missing, but I’m not sure. If anyone could help me figure out what’s causing this that would be super appreciated. Attached is the CSS code associated with the button, and a screenshot of what the button currently looks like. The negative height property in the “after” tag was part of me trying to get the text to fit right within the button. I don’t believe it affects the white space on the button. For some reason it’s not listed as an option, but the Mendix version is 8.6.8. Thanks! .sprintrFeedback__sidebar_button--feedback {   background: black;   /* margin: 0px;   padding: 0px; */   background-image: none; }   .sprintrFeedback__sidebar_button {   height: 100px;   width: 100px;   margin: 0px;   vertical-align: middle;   background-image: none;   background: black; }   .sprintrFeedback__sidebar_button:last-child:after {   display: block;   background: black;   /* margin: 0px;   padding: 0px; */ }   .sprintrFeedback__sidebar_button:after {     content: "FEEDBACK";     color: white;     background: black;     transform: rotate(90deg);     text-align: center;     vertical-align: middle;     position: initial;     line-height: 50px;     height: -70px;     width: 70px; }  

asked 2020-12-10

1 answers