Fix Buttons

src/_sass/main.scss

@@ -36,7 +36,6 @@ body {
 @import "icon";
 
 #idCard {
-
   .hero-body {
     padding-bottom: 2rem;
     padding-top: 2rem;
@@ -91,15 +90,6 @@ section#contact .button {
   display: none;
 }
 
-#buttonsUnderPhoto a {
-    padding-left: 16px;
-    padding-bottom: 0;
-}
-
-#photosAndButtons .media-content p+p {
-    margin-top: -16px;
-}
-
 .tile p.title {
   font-size: 25px;
 }

src/components/ButtonIcon/ButtonIcon.js

@@ -1,5 +1,7 @@
+import './ButtonIcon.scss';
+
 import React, { Component } from '../../../node_modules/react';
-import './ButtonIcon.scss'
+
 
 export default class ButtonIcon extends Component {
   // constructor(props) {
@@ -7,11 +9,14 @@ export default class ButtonIcon extends Component {
   //     this.state = {};
   // }
   render() {
-      return <a class="button" rel="noopener noreferrer" href={this.props.lien} target="_blank"
+    return <a rel="noopener noreferrer" href={this.props.lien} target="_blank"
       aria-label="Profil {this.props.icon}">
-          <span class="icon is-large">
+      <button class="button">
+        <span class="icon">
           <ion-icon name={this.props.icon}></ion-icon>
         </span>
+      </button>
     </a>;
+
   }
 }

src/components/ButtonIcon/ButtonIcon.scss

@@ -1,4 +0,0 @@
-
-.component-button-icon{
-    
-}

src/components/MainCard/MainCard.js

@@ -1,13 +1,13 @@
+import './MainCard.scss';
+
+import { FormattedMessage, injectIntl } from 'react-intl';
+
 import React, { Component } from '../../../node_modules/react';
-import {FormattedMessage} from 'react-intl';
-import { injectIntl } from 'react-intl'
-
-import ExperienceCard from '../ExperienceCard/index';
-import ButtonIcon from '../ButtonIcon/index';
-
-import './MainCard.scss'
-import headshotMain from '../../images/headshot_main.png';
 import headshotFond from '../../images/headshot_fond.png';
+import headshotMain from '../../images/headshot_main.png';
+import ButtonIcon from '../ButtonIcon/index';
+import ExperienceCard from '../ExperienceCard/index';
+
 
 class MainCard extends Component {
     render() {
@@ -30,26 +30,32 @@ class MainCard extends Component {
                                 <div class="card-content">
                                     <div class="media">
                                         <div class="media-content">
-                                      <p id="buttonsUnderPhoto" class="buttons are-large ">
+                                            <p id="buttonsUnderPhoto" class="field is-grouped">
+                                                <p class="control">
                                                     <ButtonIcon
                                                         icon="logo-github"
                                                         lien="https://github.com/AdamasFR" />
-
+                                                </p>
+                                                <p class="control">
                                                     <ButtonIcon
                                                         icon="logo-linkedin"
                                                         lien="https://www.linkedin.com/in/anthonyyvondumas/" />
-
+                                                </p>
+                                                <p class="control">
                                                     <ButtonIcon
                                                         icon="logo-twitter"
                                                         lien="https://www.twitter.com/adamas_fr" />
                                                 </p>
-                                      <p id="boutonCV" class="buttons are-large">
+                                            </p>
-                                          <a class="button is-fullwidth" rel="noreferrer noopener" target="_blank"
+                                            <p id="boutonCV" class="field">
+                                                <a rel="noreferrer noopener" target="_blank"
                                                     href="https://files.adm.ink/anthony-dumas-cv.pdf" >
+                                                    <button class="button is-fullwidth">
                                                         <span class="icon">
                                                             <i class="fab icon-file-pdf-o"></i>
                                                         </span>
                                                         <span><FormattedMessage id="curriculumVitaeLink" /></span>
+                                                    </button>
                                                 </a>
                                             </p>
                                         </div>

src/components/MainCard/MainCard.scss

@@ -1,4 +1,4 @@
-@import '../../_sass/main.scss';
+@import "../../_sass/main.scss";
 
 #photoProfil {
   overflow: clip;
@@ -11,9 +11,17 @@
   }
 }
 
+#boutonCV a {
+  display: flex;
+}
+
 @keyframes actorZoom {
-    from { transform: scale(100%); }
+  from {
-    to   { transform: scale(110%); }
+    transform: scale(100%);
+  }
+  to {
+    transform: scale(110%);
+  }
 }
 
 #photoProfil:hover .actor {