how to add right border before icon in button
Question
I want to add a border in the button before the icon what I m using is that my code is this
.button { background-color: #4CAF50; border: none; color: white; Width: 660px; Height:55px; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; background: #333333; position: absolute; left: 16.76%; right: 16.68%; top: 27.29%; bottom: 30.89%; font-family: DIN Pro; font-style: normal; font-weight: bold; font-size: 18px; line-height: 23px; text-align: center; text-transform: uppercase; color: #F6F6F6; }
<:DOCTYPE html> <html> <head> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min:css"> </head> <body> <a href="#" class="button">Contact<span style="border;solid 1px white"><i class="fa fa-home;"></span></i></a> </body> </html>
but it is not setting up like that. I want to set it up like the same is in the picture
1 answers
solution1
1 2021-02-22 09:06:12
Here is the code you need for the button. To answer your question about the border on the icon, I added a pseudo element ( :after ) to the button which contains the arrow icon. Then it was just a matter of applying border-left to it.
/* button styles */.button { background-color: slategray; font-family: sans-serif; border: none; outline: none; min-height: 42px; min-width: 180px; max-width: 100%; font-weight: bold; text-decoration: none; cursor: pointer; font-size: 18px; text-align: center; text-transform: uppercase; color: #F6F6F6; display: inline-flex; justify-content: center; align-items: center; padding: 8px 52px 8px 10px; position: relative; }.button:after { content: "\f061"; display: flex; position: absolute; font-family: "Font Awesome 5 Free", sans-serif; top: 0; right: 0; bottom: 0; overflow: hidden; width: 42px; display: flex; justify-content: center; align-items: center; text-align: center; border-left: 1px solid #8192a2; }.button:hover { background-color: #8192a2; }.button:hover:after { border-left-color: #95a7b8; } /* example styles */ body, html { padding: 0; margin: 0; height: 100%; display: flex; justify-content: center; align-items: center; background: coral; } * { box-sizing: border-box; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"> <a href="#" class="button">Contact</a>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to add an icon right before the placeholder in textarea
How to add an icon to a button at the bottom right corner
How to set border left and right of button using before?
How to add :after and :before icon that change on click button dropdown?
Align an icon to the right of the border
How to add an icon before the text?
how to add border to jquery button
How to add a circle on the top right corner of a button above the background and behind the border?
How to put button label on left and an icon on the right?
How to add icon in button html?
Related Tags