A Pen by Sagrika Rastogi

Thumbnail
This awesome code was written by Sagrika_Rastogi, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Sagrika_Rastogi ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Sagrika Rastogi</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div ng-controller="AppCtrl" ng-cloak>
  <md-content>

    <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
      <md-button>{{title1}}</md-button>
      <md-button md-no-ink class="md-primary">Primary (md-noink)</md-button>
      <md-button ng-disabled="true" class="md-primary">Disabled</md-button>
      <md-button class="md-warn">{{title4}}</md-button>
      <div class="label">Flat</div>
    </section>

    <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
      <md-button class="md-raised">Button</md-button>
      <md-button class="md-raised md-primary">Primary</md-button>
      <md-button ng-disabled="true" class="md-raised md-primary">Disabled</md-button>
      <md-button class="md-raised md-warn">Warn</md-button>
      <div class="label">Raised</div>
    </section>

    <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
        <md-button class="md-fab" aria-label="Eat cake">
            <md-icon md-svg-src="img/icons/cake.svg"></md-icon>
        </md-button>

        <md-button class="md-fab md-primary" aria-label="Use Android">
          <md-icon md-svg-src="img/icons/android.svg"></md-icon>
        </md-button>

        <md-button class="md-fab" ng-disabled="true" aria-label="Comment">
            <md-icon md-svg-src="img/icons/ic_comment_24px.svg"></md-icon>
        </md-button>

        <md-button class="md-fab md-primary md-hue-2" aria-label="Profile">
            <md-icon md-svg-src="img/icons/ic_people_24px.svg"></md-icon>
        </md-button>

        <md-button class="md-fab md-mini" aria-label="Eat cake">
            <md-icon md-svg-src="img/icons/cake.svg"></md-icon>
        </md-button>

        <md-button class="md-fab md-mini md-primary" aria-label="Use Android">
          <md-icon md-svg-src="img/icons/android.svg" style="color: greenyellow;"></md-icon>
        </md-button>
      <div class="label">FAB</div>
    </section>

    <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
        <md-button ng-href="{{googleUrl}}" target="_blank">Default Link</md-button>
        <md-button class="md-primary" ng-href="{{googleUrl}}" target="_blank">Primary Link</md-button>

        <md-button>Default Button</md-button>
      <div class="label">Link vs. Button</div>
    </section>

    <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
      <md-button class="md-primary md-hue-1">Primary Hue 1</md-button>
      <md-button class="md-warn md-raised md-hue-2">Warn Hue 2</md-button>
      <md-button class="md-accent">Accent</md-button>
      <md-button class="md-accent md-raised md-hue-1">Accent Hue 1</md-button>
      <div class="label">Themed</div>
    </section>

    <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
      <md-button class="md-icon-button md-primary" aria-label="Settings">
        <md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
      </md-button>
      <md-button class="md-icon-button md-accent" aria-label="Favorite">
        <md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>
      </md-button>
      <md-button class="md-icon-button" aria-label="More">
        <md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
      </md-button>
      <md-button href="http://google.com"
                 title="Launch Google.com in new window"
                 target="_blank"
                 ng-disabled="true"
                 aria-label="Google.com"
                 class="md-icon-button launch" >
        <md-icon md-svg-icon="img/icons/launch.svg"></md-icon>
      </md-button>
      <div class="label">Icon Button</div>
    </section>
  </md-content>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Sagrika_Rastogi/a-pen-by-sagrika-rastogi-wpyXxG */
.buttondemoBasicUsage section {
  background: #f7f7f7;
  border-radius: 3px;
  text-align: center;
  margin: 1em;
  position: relative !important;
  padding-bottom: 10px; }

.buttondemoBasicUsage md-content {
  margin-right: 7px; }

.buttondemoBasicUsage section .md-button {
  margin-top: 16px;
  margin-bottom: 16px; }

.buttondemoBasicUsage .label {
  position: absolute;
  bottom: 5px;
  left: 7px;
  font-size: 14px;
  opacity: 0.54; }

/*Downloaded from https://www.codeseek.co/Sagrika_Rastogi/a-pen-by-sagrika-rastogi-wpyXxG */
angular.module('buttonsDemo1', ['ngMaterial'])

.controller('AppCtrl', function($scope) {
  $scope.title1 = 'Button';
  $scope.title4 = 'Warn';
  $scope.isDisabled = true;

  $scope.googleUrl = 'http://google.com';

});

Comments