css - create button with a transparent border that is only on the second part of the button -

-

want achieve

i have header 0.8 transparency , button border of 0.8 in same color.

the button need aligned center equal bottom of header.

good

problem

when place 0.8 transparency border on header same color , 0.8 transparency going darker. wrong

possible solution

https://jsfiddle.net/extranion/fnz1ccf0/2/

* {       margin:0; padding:0;   }  body {       background-image: url("http://gallery.photo.net/photo/8551440-md.jpg");  }  button {       background:none; border:none;   }    header {       height:100px;       background-color: rgba(41, 52, 61, .8);   }    .contact {       float:right;       height:100px;       width:200px;       position:relative;   }    .wrap-btn {       position:absolute;       top:100%;       left:50px;       height:30px;       width:100px;       border-radius: 0 0 20px 20px;       background-color: rgba(41, 52, 61, .8);   }  button {       position:absolute;       bottom:10px;       left:10px;       width:80px;       height:40px;       background:orange;       border-radius:15px;   }
<body>      <header>          <div class="contact">              lorem ipsum              <div class="wrap-btn">                  <button>inloggen</button>              </div>          </div>      </header>  </body>

question

is there better solution bottom part have border?

not sure if better solution, different approach. working after elements , gradients:

  button {    top: 100%;   position: absolute;   width: 90px;     margin-top:-28px;   height:56px;     border-radius:0px 0px 14px 14px;   background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 49%,rgba(41, 52, 61, .8) 50%,rgba(41, 52, 61, .8) 100%);  }  button:after{     content:'login';     position:absolute;     left:10px;     top:10px;     width:70px;     height:15px;     padding:10px 0px;     background:orange;     border-radius:10px; }

https://jsfiddle.net/dm8654ga/1/

using gradients way, using after elements - thing don not used content attribute text -> makes difficult translations etc.

ps: if border not rounded, whole thing lot easier (workin boxshadows..)


Comments

Post a Comment

Popular posts from this blog

Android : Making Listview full screen -

-
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".mainactivity"> <edittext android:layout_margintop="5dp" android:layout_width="match_parent" android:layout_height="50dp" android:background="@drawable/location_edittext" android:id="@+id/locationeditext" android:textsize="15sp" android:textcolor="#999" android:paddingleft="15dp" /> <com.example.ravi_gupta.slider.viewpagercustomduration android:layout_width="wrap_content" android:layout_height="0dp" android:id="@+id/viewpager" android:scrollbarstyle="outsideoverlay" android:layout_weight="0.5...
Read more

javascript - Parse JSON from the body of the POST -

-
i'm using cameratag.com record video on website. service can send json response server can save data database. don't know how proceed here: the documentation states please note json repsonse passed in body of post , not form parameters. here example of how parse response in ruby: data = json.parse(request.raw_post) video_uuid = data["uuid"] but don't know how data on javascript. i'm not experienced in js please bare me :) post sample: { "uuid": "00012710-4b65-0131-ffe6-22000a499ea4", "camera_uuid": "98373a20-79ee-0130-3e42-1231390fcc11", "created_at": "2013-12-20t05:25:02.000z", "percent_complete": 100, "short_code": "kktb4q", "metadata": { }, "state": "published", "recorded_from": "http://singwho.com", "publish_type": null, "formats": [ { "name...
Read more

javascript - How to Hide Date Menu from Datepicker in yii2 -

-
basically in datetimepicker widget date choose first time, how can hide date option widget , filter according time. tried not working want hide remove button [ 'attribute'=>'time', 'label'=>'time', 'format'=>'raw', 'value'=>function($data){ return date('h:i:s',strtotime($data->time)); }, 'filter'=> datetimepicker::widget([ 'model' => $searchmodel, 'attribute' => 'time', 'clientoptions' => [ 'autoclose' => true, 'format' => 'hh:ii', 'showon' =...
Read more