Hi friends here I am sharing a article for Button Decoration using Pseudo Elements with css. It is very beautiful and simple decoration using css on pseudo elements.
As we all knows simplicity is the best beauty so by following this concept I have created this button decoration. You can use this button on very special occasion or place for your website.
Before briefing on coding for I have my two amazing previous article which may be beneficial for you too:
You can use this button with your home page banner or you can make your contact or registration form more beautiful so that it can catch more users towards your website data gathering forms like sign-up form and contact us form.
Button are the most useful elements for the website or web application it hold the most call to action command in your entire website and web application.
Now, I am going to show you coding for this button:
HTML Structure:
|
1 2 3 |
<div class="btn-wrapper"> <button>bttn.css</button> </div> |
CSS style sheet:
|
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 |
body { background: rgb(242, 242, 242) none repeat scroll 0 0; padding: 30px; } .btn-wrapper { cursor:pointer !important; left: 50%; margin: 0 auto 0 -268px; max-width: 536px; position: absolute; top: 37vh; width: 100%; } .btn-wrapper:after { background: #0188fd none repeat scroll 0 0; border-radius: 75px; content: ""; height: 100%; position: absolute; right: -21px; top: 8px; width: 100%; box-shadow:1px 1px 2px rgba(0,0,0,0.1); z-index: -1;} .btn-wrapper:before { background: #d201fd none repeat scroll 0 0; border-radius: 75px; content: ""; height: 100%; position: absolute; left: -2px; top: 15px; width: 100%; box-shadow:1px 1px 2px rgba(0,0,0,0.1); z-index: -1;} .btn-wrapper button { background: rgb(255, 255, 255) none repeat scroll 0 0; border: medium none; border-radius: 75px; color: rgb(254, 128, 0); font-size: 94px; font-weight: bold; letter-spacing: 6px; max-width: 536px; padding: 10px; text-shadow: 2px 2px 2px rgb(232, 88, 14); width: 100%; box-shadow:-21px 0px 1px #EC7063; } .btn-wrapper button:after { background: rgb(248, 171, 15) none repeat scroll 0 0; border-radius: 75px; content: ""; height: 100%; position: absolute; right: -17px; top: -8px; width: 100%; box-shadow:1px 1px 2px rgba(0,0,0,0.1); z-index: -1;} .btn-wrapper button:before { background: #04bc8a none repeat scroll 0 0; border-radius: 75px; content: ""; height: 100%; position: absolute; left: -21px; top: -15px; box-shadow:1px 1px 2px rgba(0,0,0,0.1); width: 100%; z-index: -1;} |