Reply to thread

Message

<blockquote data-quote="Markshall" data-source="post: 441082" data-attributes="member: 1872">I think it's safe to say that by now, we've all seen the 'floating action button' effect.&nbsp; Correct me if I'm wrong, but it was popularised by Google with the Material design language.Well, if you've not seen it, it's a button that floats (usually at the bottom right of a document), and when clicked, it displays a list of actions.As ever, I'm using one of my favourite tricks of styling a checkbox as a toggle-listener rather than using JavaScript.<img src="https://i.sharefa.st/mYVpoLuA3nE3.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /><img src="https://i.sharefa.st/oD8h7T0H3nE3.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /><a href="https://codepen.io/Markshall/pen/wQyWqq" target="_blank">https://codepen.io/Markshall/pen/wQyWqq</a>CSS:[CODE=css]body {&nbsp; &nbsp; background-color: #f5f5f5;}.adminActions {&nbsp; position: fixed;&nbsp; bottom: 35px; right: 35px;}&nbsp; .adminButton {&nbsp; &nbsp; height: 60px;&nbsp; &nbsp; width: 60px;&nbsp; &nbsp; background-color: rgba(67, 83, 143, .8);&nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; display: block;&nbsp; &nbsp; color: #fff;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; z-index: 1;&nbsp; }&nbsp; &nbsp; .adminButton i {&nbsp; &nbsp; &nbsp; font-size: 22px;&nbsp; &nbsp; }&nbsp; .adminButtons {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; bottom: 120%;&nbsp; &nbsp; text-align: center;&nbsp; }&nbsp; &nbsp; .adminButtons a {&nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; width: 45px;&nbsp; &nbsp; &nbsp; height: 45px;&nbsp; &nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; &nbsp; margin: 10px auto 0;&nbsp; &nbsp; &nbsp; line-height: 1.15;&nbsp; &nbsp; &nbsp; color: #fff;&nbsp; &nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; &nbsp; visibility: hidden;&nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; box-shadow: 0 0 5px 1px rgba(51, 51, 51, .3);&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; .adminButtons a:hover {&nbsp; &nbsp; &nbsp; &nbsp; transform: scale(1.05);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; .adminButtons a:nth-child(1) {background-color: #ff5722; transition: opacity .2s ease-in-out .3s, transform .15s ease-in-out;}&nbsp; &nbsp; &nbsp; .adminButtons a:nth-child(2) {background-color: #03a9f4; transition: opacity .2s ease-in-out .25s, transform .15s ease-in-out;}&nbsp; &nbsp; &nbsp; .adminButtons a:nth-child(3) {background-color: #f44336; transition: opacity .2s ease-in-out .2s, transform .15s ease-in-out;}&nbsp; &nbsp; &nbsp; .adminButtons a:nth-child(4) {background-color: #4CAF50; transition: opacity .2s ease-in-out .15s, transform .15s ease-in-out;}&nbsp; &nbsp; &nbsp; .adminActions a i {&nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; top: 50%; left: 50%;&nbsp; &nbsp; &nbsp; &nbsp; transform: translate(-50%, -50%);&nbsp; &nbsp; &nbsp; }&nbsp; .adminToggle {&nbsp; &nbsp; -webkit-appearance: none;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; top: 0; left: 0;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; background-color: transparent;&nbsp; &nbsp; border: none;&nbsp; &nbsp; outline: none;&nbsp; &nbsp; z-index: 2;&nbsp; &nbsp; transition: box-shadow .2s ease-in-out;&nbsp; &nbsp; box-shadow: 0 3px 5px 1px rgba(51, 51, 51, .3);&nbsp; }&nbsp; &nbsp; .adminToggle:hover {&nbsp; &nbsp; &nbsp; box-shadow: 0 3px 6px 2px rgba(51, 51, 51, .3);&nbsp; &nbsp; }&nbsp; &nbsp; .adminToggle:checked ~ .adminButtons a {&nbsp; &nbsp; &nbsp; opacity: 1;&nbsp; &nbsp; &nbsp; visibility: visible;&nbsp; &nbsp; }[/CODE]HTML:[CODE=html]&lt;div class=&quot;adminActions&quot;&gt;&nbsp; &nbsp; &lt;input type=&quot;checkbox&quot; name=&quot;adminToggle&quot; class=&quot;adminToggle&quot; /&gt;&nbsp; &nbsp; &lt;a class=&quot;adminButton&quot; href=&quot;#!&quot;&gt;&lt;i class=&quot;fa fa-cog&quot;&gt;&lt;/i&gt;&lt;/a&gt;&nbsp; &nbsp; &lt;div class=&quot;adminButtons&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; title=&quot;Add Company&quot;&gt;&lt;i class=&quot;fa fa-building&quot;&gt;&lt;/i&gt;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; title=&quot;Edit Company&quot;&gt;&lt;i class=&quot;fa fa-pen&quot;&gt;&lt;/i&gt;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; title=&quot;Add User&quot;&gt;&lt;i class=&quot;fa fa-user-plus&quot;&gt;&lt;/i&gt;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; title=&quot;Edit User&quot;&gt;&lt;i class=&quot;fa fa-user-edit&quot;&gt;&lt;/i&gt;&lt;/a&gt;&nbsp; &nbsp; &lt;/div&gt;&lt;/div&gt;[/CODE]</blockquote>

[QUOTE="Markshall, post: 441082, member: 1872"] I think it's safe to say that by now, we've all seen the 'floating action button' effect. Correct me if I'm wrong, but it was popularised by Google with the Material design language. Well, if you've not seen it, it's a button that floats (usually at the bottom right of a document), and when clicked, it displays a list of actions. As ever, I'm using one of my favourite tricks of styling a checkbox as a toggle-listener rather than using JavaScript. [IMG]https://i.sharefa.st/mYVpoLuA3nE3.png[/IMG][IMG]https://i.sharefa.st/oD8h7T0H3nE3.png[/IMG] [URL]https://codepen.io/Markshall/pen/wQyWqq[/URL] CSS: [CODE=css]body { background-color: #f5f5f5; } .adminActions { position: fixed; bottom: 35px; right: 35px; } .adminButton { height: 60px; width: 60px; background-color: rgba(67, 83, 143, .8); border-radius: 50%; display: block; color: #fff; text-align: center; position: relative; z-index: 1; } .adminButton i { font-size: 22px; } .adminButtons { position: absolute; width: 100%; bottom: 120%; text-align: center; } .adminButtons a { display: block; width: 45px; height: 45px; border-radius: 50%; text-decoration: none; margin: 10px auto 0; line-height: 1.15; color: #fff; opacity: 0; visibility: hidden; position: relative; box-shadow: 0 0 5px 1px rgba(51, 51, 51, .3); } .adminButtons a:hover { transform: scale(1.05); } .adminButtons a:nth-child(1) {background-color: #ff5722; transition: opacity .2s ease-in-out .3s, transform .15s ease-in-out;} .adminButtons a:nth-child(2) {background-color: #03a9f4; transition: opacity .2s ease-in-out .25s, transform .15s ease-in-out;} .adminButtons a:nth-child(3) {background-color: #f44336; transition: opacity .2s ease-in-out .2s, transform .15s ease-in-out;} .adminButtons a:nth-child(4) {background-color: #4CAF50; transition: opacity .2s ease-in-out .15s, transform .15s ease-in-out;} .adminActions a i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .adminToggle { -webkit-appearance: none; position: absolute; border-radius: 50%; top: 0; left: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; background-color: transparent; border: none; outline: none; z-index: 2; transition: box-shadow .2s ease-in-out; box-shadow: 0 3px 5px 1px rgba(51, 51, 51, .3); } .adminToggle:hover { box-shadow: 0 3px 6px 2px rgba(51, 51, 51, .3); } .adminToggle:checked ~ .adminButtons a { opacity: 1; visibility: visible; }[/CODE] HTML: [CODE=html]<div class="adminActions"> <input type="checkbox" name="adminToggle" class="adminToggle" /> <a class="adminButton" href="#!"></a> <div class="adminButtons"> <a href="#" title="Add Company"></a> <a href="#" title="Edit Company"></a> <a href="#" title="Add User"></a> <a href="#" title="Edit User"></a> </div> </div>[/CODE] [/QUOTE]

Verification

Reply to thread

Connect with us

Newest members