html - CSS Button with Gradient Border -


i want make button seen in picture silver-ish border gradient. have done except border stuck it. below current css button.

this image of button have , need

.button_submit {     background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0cbbc8), color-stop(1, #008995));     background:-moz-linear-gradient(top, #0cbbc8 5%, #008995 100%);     background:-webkit-linear-gradient(top, #0cbbc8 5%, #008995 100%);     background:-o-linear-gradient(top, #0cbbc8 5%, #008995 100%);     background:-ms-linear-gradient(top, #0cbbc8 5%, #008995 100%);     background:linear-gradient(to bottom, #0cbbc8 5%, #008995 100%);     filter:progid:dximagetransform.microsoft.gradient(startcolorstr='#0cbbc8', endcolorstr='#008995',gradienttype=0);     background-color:#0cbbc8;     -moz-border-radius:6px;     -webkit-border-radius:6px;     border-radius:6px;     border:1px solid #ffffff;     display:inline-block;     cursor:pointer;     color:#ffffff;     font-family:arial;     font-size:15px;     font-weight:bold;     padding:6px 24px;     text-decoration:none; } .button_submit:hover {     background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #008995), color-stop(1, #0cbbc8));     background:-moz-linear-gradient(top, #008995 5%, #0cbbc8 100%);     background:-webkit-linear-gradient(top, #008995 5%, #0cbbc8 100%);     background:-o-linear-gradient(top, #008995 5%, #0cbbc8 100%);     background:-ms-linear-gradient(top, #008995 5%, #0cbbc8 100%);     background:linear-gradient(to bottom, #008995 5%, #0cbbc8 100%);     filter:progid:dximagetransform.microsoft.gradient(startcolorstr='#008995', endcolorstr='#0cbbc8',gradienttype=0);     background-color:#008995; } .button_submit:active {     position:relative;     top:1px; }

adding box-shadow gets pretty close. play :before psuedo-element white background.

the key part added is:

box-shadow: 0px 2px 5px -1px #333;

you'll have play around start.

.button_submit {      position: relative;      box-shadow: 0px 2px 5px -1px #333;          background:linear-gradient(to bottom, #0cbbc8 5%, #008995 100%);      background-color:#0cbbc8;      border-radius:6px;      border:1px solid #ffffff;      display:inline-block;      cursor:pointer;      color:#ffffff;      font-family:arial;      font-size:15px;      font-weight:bold;      padding:6px 24px;      text-decoration:none;  }  .button_submit:hover {      background:linear-gradient(to bottom, #008995 5%, #0cbbc8 100%);      background-color:#008995;  }  .button_submit:active {      position:relative;      top:1px;  }
<button class="button_submit">  submit  </button>


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more